@zag-js/slider 0.0.0-dev-20220416152643 → 0.0.0-dev-20220417135151
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/index.d.ts +2 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +207 -205
- package/dist/index.js.map +2 -2
- package/dist/index.mjs +207 -205
- package/dist/index.mjs.map +2 -2
- package/dist/slider.connect.d.ts +2 -3
- package/dist/slider.connect.d.ts.map +1 -1
- package/dist/slider.machine.d.ts +2 -2
- package/dist/slider.machine.d.ts.map +1 -1
- package/dist/slider.types.d.ts +38 -24
- package/dist/slider.types.d.ts.map +1 -1
- package/package.json +7 -7
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
export { dom as unstable__dom } from "./slider.dom";
|
|
2
2
|
export { connect } from "./slider.connect";
|
|
3
3
|
export { machine } from "./slider.machine";
|
|
4
|
-
export type {
|
|
5
|
-
export { unstable__dom };
|
|
4
|
+
export type { UserDefinedContext as Context } from "./slider.types";
|
|
6
5
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,IAAI,aAAa,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,IAAI,aAAa,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC1C,YAAY,EAAE,kBAAkB,IAAI,OAAO,EAAE,MAAM,gBAAgB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -824,222 +824,224 @@ function connect(state2, send, normalize = normalizeProp) {
|
|
|
824
824
|
|
|
825
825
|
// src/slider.machine.ts
|
|
826
826
|
var import_core = require("@zag-js/core");
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
watch: {
|
|
852
|
-
value: ["invokeOnChange", "dispatchChangeEvent"]
|
|
853
|
-
},
|
|
854
|
-
activities: ["trackFormReset", "trackScriptedUpdate"],
|
|
855
|
-
on: {
|
|
856
|
-
SET_VALUE: {
|
|
857
|
-
actions: "setValue"
|
|
858
|
-
},
|
|
859
|
-
INCREMENT: {
|
|
860
|
-
actions: "increment"
|
|
861
|
-
},
|
|
862
|
-
DECREMENT: {
|
|
863
|
-
actions: "decrement"
|
|
864
|
-
}
|
|
865
|
-
},
|
|
866
|
-
states: {
|
|
867
|
-
unknown: {
|
|
868
|
-
on: {
|
|
869
|
-
SETUP: {
|
|
870
|
-
target: "idle",
|
|
871
|
-
actions: ["setupDocument", "setThumbSize", "checkValue"]
|
|
872
|
-
}
|
|
873
|
-
}
|
|
827
|
+
function machine(ctx = {}) {
|
|
828
|
+
return (0, import_core.createMachine)({
|
|
829
|
+
id: "slider",
|
|
830
|
+
initial: "unknown",
|
|
831
|
+
context: __spreadValues({
|
|
832
|
+
thumbSize: null,
|
|
833
|
+
uid: "",
|
|
834
|
+
disabled: false,
|
|
835
|
+
threshold: 5,
|
|
836
|
+
dir: "ltr",
|
|
837
|
+
origin: "start",
|
|
838
|
+
orientation: "horizontal",
|
|
839
|
+
initialValue: null,
|
|
840
|
+
value: 0,
|
|
841
|
+
step: 1,
|
|
842
|
+
min: 0,
|
|
843
|
+
max: 100
|
|
844
|
+
}, ctx),
|
|
845
|
+
computed: {
|
|
846
|
+
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
847
|
+
isVertical: (ctx2) => ctx2.orientation === "vertical",
|
|
848
|
+
isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
|
|
849
|
+
isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readonly),
|
|
850
|
+
hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null
|
|
874
851
|
},
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
POINTER_DOWN: {
|
|
878
|
-
target: "dragging",
|
|
879
|
-
actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
|
|
880
|
-
},
|
|
881
|
-
FOCUS: "focus"
|
|
882
|
-
}
|
|
852
|
+
watch: {
|
|
853
|
+
value: ["invokeOnChange", "dispatchChangeEvent"]
|
|
883
854
|
},
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
},
|
|
895
|
-
ARROW_RIGHT: {
|
|
896
|
-
guard: "isHorizontal",
|
|
897
|
-
actions: "increment"
|
|
898
|
-
},
|
|
899
|
-
ARROW_UP: {
|
|
900
|
-
guard: "isVertical",
|
|
901
|
-
actions: "increment"
|
|
902
|
-
},
|
|
903
|
-
ARROW_DOWN: {
|
|
904
|
-
guard: "isVertical",
|
|
905
|
-
actions: "decrement"
|
|
906
|
-
},
|
|
907
|
-
PAGE_UP: {
|
|
908
|
-
actions: "increment"
|
|
909
|
-
},
|
|
910
|
-
PAGE_DOWN: {
|
|
911
|
-
actions: "decrement"
|
|
912
|
-
},
|
|
913
|
-
HOME: {
|
|
914
|
-
actions: "setToMin"
|
|
915
|
-
},
|
|
916
|
-
END: {
|
|
917
|
-
actions: "setToMax"
|
|
918
|
-
},
|
|
919
|
-
BLUR: "idle"
|
|
855
|
+
activities: ["trackFormReset", "trackScriptedUpdate"],
|
|
856
|
+
on: {
|
|
857
|
+
SET_VALUE: {
|
|
858
|
+
actions: "setValue"
|
|
859
|
+
},
|
|
860
|
+
INCREMENT: {
|
|
861
|
+
actions: "increment"
|
|
862
|
+
},
|
|
863
|
+
DECREMENT: {
|
|
864
|
+
actions: "decrement"
|
|
920
865
|
}
|
|
921
866
|
},
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
}
|
|
930
|
-
|
|
931
|
-
|
|
867
|
+
states: {
|
|
868
|
+
unknown: {
|
|
869
|
+
on: {
|
|
870
|
+
SETUP: {
|
|
871
|
+
target: "idle",
|
|
872
|
+
actions: ["setupDocument", "setThumbSize", "checkValue"]
|
|
873
|
+
}
|
|
874
|
+
}
|
|
875
|
+
},
|
|
876
|
+
idle: {
|
|
877
|
+
on: {
|
|
878
|
+
POINTER_DOWN: {
|
|
879
|
+
target: "dragging",
|
|
880
|
+
actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
|
|
881
|
+
},
|
|
882
|
+
FOCUS: "focus"
|
|
883
|
+
}
|
|
884
|
+
},
|
|
885
|
+
focus: {
|
|
886
|
+
entry: "focusThumb",
|
|
887
|
+
on: {
|
|
888
|
+
POINTER_DOWN: {
|
|
889
|
+
target: "dragging",
|
|
890
|
+
actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
|
|
891
|
+
},
|
|
892
|
+
ARROW_LEFT: {
|
|
893
|
+
guard: "isHorizontal",
|
|
894
|
+
actions: "decrement"
|
|
895
|
+
},
|
|
896
|
+
ARROW_RIGHT: {
|
|
897
|
+
guard: "isHorizontal",
|
|
898
|
+
actions: "increment"
|
|
899
|
+
},
|
|
900
|
+
ARROW_UP: {
|
|
901
|
+
guard: "isVertical",
|
|
902
|
+
actions: "increment"
|
|
903
|
+
},
|
|
904
|
+
ARROW_DOWN: {
|
|
905
|
+
guard: "isVertical",
|
|
906
|
+
actions: "decrement"
|
|
907
|
+
},
|
|
908
|
+
PAGE_UP: {
|
|
909
|
+
actions: "increment"
|
|
910
|
+
},
|
|
911
|
+
PAGE_DOWN: {
|
|
912
|
+
actions: "decrement"
|
|
913
|
+
},
|
|
914
|
+
HOME: {
|
|
915
|
+
actions: "setToMin"
|
|
916
|
+
},
|
|
917
|
+
END: {
|
|
918
|
+
actions: "setToMax"
|
|
919
|
+
},
|
|
920
|
+
BLUR: "idle"
|
|
921
|
+
}
|
|
922
|
+
},
|
|
923
|
+
dragging: {
|
|
924
|
+
entry: "focusThumb",
|
|
925
|
+
activities: "trackPointerMove",
|
|
926
|
+
on: {
|
|
927
|
+
POINTER_UP: {
|
|
928
|
+
target: "focus",
|
|
929
|
+
actions: "invokeOnChangeEnd"
|
|
930
|
+
},
|
|
931
|
+
POINTER_MOVE: {
|
|
932
|
+
actions: "setPointerValue"
|
|
933
|
+
}
|
|
932
934
|
}
|
|
933
935
|
}
|
|
934
936
|
}
|
|
935
|
-
}
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
937
|
+
}, {
|
|
938
|
+
guards: {
|
|
939
|
+
isHorizontal: (ctx2) => ctx2.isHorizontal,
|
|
940
|
+
isVertical: (ctx2) => ctx2.isVertical
|
|
941
|
+
},
|
|
942
|
+
activities: {
|
|
943
|
+
trackScriptedUpdate(ctx2, _, { send }) {
|
|
944
|
+
let cleanup;
|
|
945
|
+
nextTick(() => {
|
|
946
|
+
const el = dom.getInputEl(ctx2);
|
|
947
|
+
if (!el)
|
|
948
|
+
return;
|
|
949
|
+
cleanup = trackInputPropertyMutation(el, {
|
|
950
|
+
type: "input",
|
|
951
|
+
property: "value",
|
|
952
|
+
fn(value) {
|
|
953
|
+
send({ type: "SET_VALUE", value: parseFloat(value) });
|
|
954
|
+
}
|
|
955
|
+
});
|
|
956
|
+
});
|
|
957
|
+
return () => cleanup == null ? void 0 : cleanup();
|
|
958
|
+
},
|
|
959
|
+
trackFormReset(ctx2) {
|
|
960
|
+
let cleanup;
|
|
961
|
+
nextTick(() => {
|
|
962
|
+
const el = dom.getInputEl(ctx2);
|
|
963
|
+
if (!el)
|
|
964
|
+
return;
|
|
965
|
+
cleanup = trackFormReset(el, () => {
|
|
966
|
+
if (ctx2.initialValue != null)
|
|
967
|
+
ctx2.value = ctx2.initialValue;
|
|
968
|
+
});
|
|
969
|
+
});
|
|
970
|
+
return cleanup;
|
|
971
|
+
},
|
|
972
|
+
trackPointerMove(ctx2, _evt, { send }) {
|
|
973
|
+
return trackPointerMove({
|
|
974
|
+
ctx: ctx2,
|
|
975
|
+
onPointerMove(info) {
|
|
976
|
+
send({ type: "POINTER_MOVE", point: info.point });
|
|
977
|
+
},
|
|
978
|
+
onPointerUp() {
|
|
979
|
+
send("POINTER_UP");
|
|
953
980
|
}
|
|
954
981
|
});
|
|
955
|
-
}
|
|
956
|
-
return () => cleanup == null ? void 0 : cleanup();
|
|
982
|
+
}
|
|
957
983
|
},
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
984
|
+
actions: {
|
|
985
|
+
setupDocument(ctx2, evt) {
|
|
986
|
+
if (evt.doc)
|
|
987
|
+
ctx2.doc = (0, import_core.ref)(evt.doc);
|
|
988
|
+
ctx2.uid = evt.id;
|
|
989
|
+
},
|
|
990
|
+
checkValue(ctx2) {
|
|
991
|
+
const value = utils.convert(ctx2, ctx2.value);
|
|
992
|
+
Object.assign(ctx2, { value, initialValue: value });
|
|
993
|
+
},
|
|
994
|
+
invokeOnChangeStart(ctx2) {
|
|
995
|
+
var _a;
|
|
996
|
+
(_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
997
|
+
},
|
|
998
|
+
invokeOnChangeEnd(ctx2) {
|
|
999
|
+
var _a;
|
|
1000
|
+
(_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
1001
|
+
},
|
|
1002
|
+
invokeOnChange(ctx2) {
|
|
1003
|
+
var _a;
|
|
1004
|
+
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
1005
|
+
},
|
|
1006
|
+
dispatchChangeEvent(ctx2) {
|
|
1007
|
+
dom.dispatchChangeEvent(ctx2);
|
|
1008
|
+
},
|
|
1009
|
+
setThumbSize(ctx2) {
|
|
1010
|
+
raf(() => {
|
|
1011
|
+
const el = dom.getThumbEl(ctx2);
|
|
1012
|
+
if (!el)
|
|
1013
|
+
return;
|
|
1014
|
+
ctx2.thumbSize = { width: el.offsetWidth, height: el.offsetHeight };
|
|
967
1015
|
});
|
|
968
|
-
}
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
return trackPointerMove({
|
|
973
|
-
ctx,
|
|
974
|
-
onPointerMove(info) {
|
|
975
|
-
send({ type: "POINTER_MOVE", point: info.point });
|
|
976
|
-
},
|
|
977
|
-
onPointerUp() {
|
|
978
|
-
send("POINTER_UP");
|
|
979
|
-
}
|
|
980
|
-
});
|
|
981
|
-
}
|
|
982
|
-
},
|
|
983
|
-
actions: {
|
|
984
|
-
setupDocument(ctx, evt) {
|
|
985
|
-
if (evt.doc)
|
|
986
|
-
ctx.doc = (0, import_core.ref)(evt.doc);
|
|
987
|
-
ctx.uid = evt.id;
|
|
988
|
-
},
|
|
989
|
-
checkValue(ctx) {
|
|
990
|
-
const value = utils.convert(ctx, ctx.value);
|
|
991
|
-
Object.assign(ctx, { value, initialValue: value });
|
|
992
|
-
},
|
|
993
|
-
invokeOnChangeStart(ctx) {
|
|
994
|
-
var _a;
|
|
995
|
-
(_a = ctx.onChangeStart) == null ? void 0 : _a.call(ctx, { value: ctx.value });
|
|
996
|
-
},
|
|
997
|
-
invokeOnChangeEnd(ctx) {
|
|
998
|
-
var _a;
|
|
999
|
-
(_a = ctx.onChangeEnd) == null ? void 0 : _a.call(ctx, { value: ctx.value });
|
|
1000
|
-
},
|
|
1001
|
-
invokeOnChange(ctx) {
|
|
1002
|
-
var _a;
|
|
1003
|
-
(_a = ctx.onChange) == null ? void 0 : _a.call(ctx, { value: ctx.value });
|
|
1004
|
-
},
|
|
1005
|
-
dispatchChangeEvent(ctx) {
|
|
1006
|
-
dom.dispatchChangeEvent(ctx);
|
|
1007
|
-
},
|
|
1008
|
-
setThumbSize(ctx) {
|
|
1009
|
-
raf(() => {
|
|
1010
|
-
const el = dom.getThumbEl(ctx);
|
|
1011
|
-
if (!el)
|
|
1016
|
+
},
|
|
1017
|
+
setPointerValue(ctx2, evt) {
|
|
1018
|
+
const value = dom.getValueFromPoint(ctx2, evt.point);
|
|
1019
|
+
if (value == null)
|
|
1012
1020
|
return;
|
|
1013
|
-
|
|
1014
|
-
}
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
}
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
},
|
|
1037
|
-
setToMax(ctx) {
|
|
1038
|
-
ctx.value = ctx.max;
|
|
1039
|
-
},
|
|
1040
|
-
setValue(ctx, evt) {
|
|
1041
|
-
ctx.value = utils.convert(ctx, evt.value);
|
|
1021
|
+
ctx2.value = utils.clamp(ctx2, value);
|
|
1022
|
+
},
|
|
1023
|
+
focusThumb(ctx2) {
|
|
1024
|
+
nextTick(() => {
|
|
1025
|
+
var _a;
|
|
1026
|
+
return (_a = dom.getThumbEl(ctx2)) == null ? void 0 : _a.focus();
|
|
1027
|
+
});
|
|
1028
|
+
},
|
|
1029
|
+
decrement(ctx2, evt) {
|
|
1030
|
+
ctx2.value = utils.decrement(ctx2, evt.step);
|
|
1031
|
+
},
|
|
1032
|
+
increment(ctx2, evt) {
|
|
1033
|
+
ctx2.value = utils.increment(ctx2, evt.step);
|
|
1034
|
+
},
|
|
1035
|
+
setToMin(ctx2) {
|
|
1036
|
+
ctx2.value = ctx2.min;
|
|
1037
|
+
},
|
|
1038
|
+
setToMax(ctx2) {
|
|
1039
|
+
ctx2.value = ctx2.max;
|
|
1040
|
+
},
|
|
1041
|
+
setValue(ctx2, evt) {
|
|
1042
|
+
ctx2.value = utils.convert(ctx2, evt.value);
|
|
1043
|
+
}
|
|
1042
1044
|
}
|
|
1043
|
-
}
|
|
1044
|
-
}
|
|
1045
|
+
});
|
|
1046
|
+
}
|
|
1045
1047
|
//# sourceMappingURL=index.js.map
|