@zag-js/slider 0.80.0 → 0.81.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/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +24 -26
- package/dist/index.mjs +2 -4
- package/package.json +8 -10
package/dist/index.d.mts
CHANGED
|
@@ -265,8 +265,8 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
|
|
|
265
265
|
|
|
266
266
|
declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
267
267
|
|
|
268
|
-
declare const props: ("
|
|
269
|
-
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "
|
|
268
|
+
declare const props: ("disabled" | "step" | "form" | "dir" | "id" | "aria-label" | "aria-labelledby" | "max" | "min" | "name" | "origin" | "value" | "orientation" | "getRootNode" | "invalid" | "ids" | "readOnly" | "onValueChange" | "onValueChangeEnd" | "onFocusChange" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment" | "thumbSize")[];
|
|
269
|
+
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "disabled" | "step" | "form" | "dir" | "id" | "aria-label" | "aria-labelledby" | "max" | "min" | "name" | "origin" | "value" | "orientation" | "getRootNode" | "invalid" | "ids" | "readOnly" | "onValueChange" | "onValueChangeEnd" | "onFocusChange" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment" | "thumbSize">];
|
|
270
270
|
declare const thumbProps: (keyof ThumbProps)[];
|
|
271
271
|
declare const splitThumbProps: <Props extends ThumbProps>(props: Props) => [ThumbProps, Omit<Props, keyof ThumbProps>];
|
|
272
272
|
|
package/dist/index.d.ts
CHANGED
|
@@ -265,8 +265,8 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
|
|
|
265
265
|
|
|
266
266
|
declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
267
267
|
|
|
268
|
-
declare const props: ("
|
|
269
|
-
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "
|
|
268
|
+
declare const props: ("disabled" | "step" | "form" | "dir" | "id" | "aria-label" | "aria-labelledby" | "max" | "min" | "name" | "origin" | "value" | "orientation" | "getRootNode" | "invalid" | "ids" | "readOnly" | "onValueChange" | "onValueChangeEnd" | "onFocusChange" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment" | "thumbSize")[];
|
|
269
|
+
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "disabled" | "step" | "form" | "dir" | "id" | "aria-label" | "aria-labelledby" | "max" | "min" | "name" | "origin" | "value" | "orientation" | "getRootNode" | "invalid" | "ids" | "readOnly" | "onValueChange" | "onValueChangeEnd" | "onFocusChange" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment" | "thumbSize">];
|
|
270
270
|
declare const thumbProps: (keyof ThumbProps)[];
|
|
271
271
|
declare const splitThumbProps: <Props extends ThumbProps>(props: Props) => [ThumbProps, Omit<Props, keyof ThumbProps>];
|
|
272
272
|
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var anatomy$1 = require('@zag-js/anatomy');
|
|
4
|
-
var domEvent = require('@zag-js/dom-event');
|
|
5
4
|
var domQuery = require('@zag-js/dom-query');
|
|
6
|
-
var
|
|
5
|
+
var utils = require('@zag-js/utils');
|
|
7
6
|
var formUtils = require('@zag-js/form-utils');
|
|
8
7
|
var core = require('@zag-js/core');
|
|
9
8
|
var elementSize = require('@zag-js/element-size');
|
|
10
|
-
var utils = require('@zag-js/utils');
|
|
11
9
|
var types = require('@zag-js/types');
|
|
12
10
|
|
|
13
11
|
// src/slider.anatomy.ts
|
|
@@ -58,16 +56,16 @@ function getRangeStyle(ctx) {
|
|
|
58
56
|
}
|
|
59
57
|
function getVerticalThumbOffset(ctx) {
|
|
60
58
|
const { height = 0 } = ctx.thumbSize ?? {};
|
|
61
|
-
const getValue =
|
|
59
|
+
const getValue = utils.getValueTransformer([ctx.min, ctx.max], [-height / 2, height / 2]);
|
|
62
60
|
return parseFloat(getValue(ctx.value).toFixed(2));
|
|
63
61
|
}
|
|
64
62
|
function getHorizontalThumbOffset(ctx) {
|
|
65
63
|
const { width = 0 } = ctx.thumbSize ?? {};
|
|
66
64
|
if (ctx.isRtl) {
|
|
67
|
-
const getValue2 =
|
|
65
|
+
const getValue2 = utils.getValueTransformer([ctx.max, ctx.min], [-width / 2, width / 2]);
|
|
68
66
|
return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
|
|
69
67
|
}
|
|
70
|
-
const getValue =
|
|
68
|
+
const getValue = utils.getValueTransformer([ctx.min, ctx.max], [-width / 2, width / 2]);
|
|
71
69
|
return parseFloat(getValue(ctx.value).toFixed(2));
|
|
72
70
|
}
|
|
73
71
|
function getOffset(ctx, percent) {
|
|
@@ -76,7 +74,7 @@ function getOffset(ctx, percent) {
|
|
|
76
74
|
return `calc(${percent}% - ${offset}px)`;
|
|
77
75
|
}
|
|
78
76
|
function getThumbOffset(ctx) {
|
|
79
|
-
let percent =
|
|
77
|
+
let percent = utils.getValuePercent(ctx.value, ctx.min, ctx.max) * 100;
|
|
80
78
|
return getOffset(ctx, percent);
|
|
81
79
|
}
|
|
82
80
|
function getVisibility(ctx) {
|
|
@@ -168,13 +166,13 @@ var dom = domQuery.createScope({
|
|
|
168
166
|
getValueFromPoint(ctx, point) {
|
|
169
167
|
const controlEl = dom.getControlEl(ctx);
|
|
170
168
|
if (!controlEl) return;
|
|
171
|
-
const relativePoint =
|
|
169
|
+
const relativePoint = domQuery.getRelativePoint(point, controlEl);
|
|
172
170
|
const percent = relativePoint.getPercentValue({
|
|
173
171
|
orientation: ctx.orientation,
|
|
174
172
|
dir: ctx.dir,
|
|
175
173
|
inverted: { y: true }
|
|
176
174
|
});
|
|
177
|
-
return
|
|
175
|
+
return utils.getPercentValue(percent, ctx.min, ctx.max, ctx.step);
|
|
178
176
|
},
|
|
179
177
|
dispatchChangeEvent(ctx) {
|
|
180
178
|
const valueArray = Array.from(ctx.value);
|
|
@@ -191,37 +189,37 @@ function normalizeValues(ctx, nextValues) {
|
|
|
191
189
|
});
|
|
192
190
|
}
|
|
193
191
|
function getRangeAtIndex(ctx, index) {
|
|
194
|
-
return
|
|
192
|
+
return utils.getValueRanges(ctx.value, ctx.min, ctx.max, ctx.minStepsBetweenThumbs)[index];
|
|
195
193
|
}
|
|
196
194
|
function constrainValue(ctx, value, index) {
|
|
197
195
|
const range = getRangeAtIndex(ctx, index);
|
|
198
|
-
const snapValue =
|
|
199
|
-
return
|
|
196
|
+
const snapValue = utils.snapValueToStep(value, ctx.min, ctx.max, ctx.step);
|
|
197
|
+
return utils.clampValue(snapValue, range.min, range.max);
|
|
200
198
|
}
|
|
201
199
|
function decrement(ctx, index, step) {
|
|
202
200
|
const idx = index ?? ctx.focusedIndex;
|
|
203
201
|
const range = getRangeAtIndex(ctx, idx);
|
|
204
|
-
const nextValues =
|
|
202
|
+
const nextValues = utils.getPreviousStepValue(idx, {
|
|
205
203
|
...range,
|
|
206
204
|
step: step ?? ctx.step,
|
|
207
205
|
values: ctx.value
|
|
208
206
|
});
|
|
209
|
-
nextValues[idx] =
|
|
207
|
+
nextValues[idx] = utils.clampValue(nextValues[idx], range.min, range.max);
|
|
210
208
|
return nextValues;
|
|
211
209
|
}
|
|
212
210
|
function increment(ctx, index, step) {
|
|
213
211
|
const idx = index ?? ctx.focusedIndex;
|
|
214
212
|
const range = getRangeAtIndex(ctx, idx);
|
|
215
|
-
const nextValues =
|
|
213
|
+
const nextValues = utils.getNextStepValue(idx, {
|
|
216
214
|
...range,
|
|
217
215
|
step: step ?? ctx.step,
|
|
218
216
|
values: ctx.value
|
|
219
217
|
});
|
|
220
|
-
nextValues[idx] =
|
|
218
|
+
nextValues[idx] = utils.clampValue(nextValues[idx], range.min, range.max);
|
|
221
219
|
return nextValues;
|
|
222
220
|
}
|
|
223
221
|
function getClosestIndex(ctx, pointValue) {
|
|
224
|
-
return
|
|
222
|
+
return utils.getClosestValueIndex(ctx.value, pointValue);
|
|
225
223
|
}
|
|
226
224
|
function assignArray(current, next) {
|
|
227
225
|
for (let i = 0; i < next.length; i++) {
|
|
@@ -243,10 +241,10 @@ function connect(state, send, normalize) {
|
|
|
243
241
|
const isHorizontal = state.context.orientation === "horizontal";
|
|
244
242
|
const isVertical = state.context.orientation === "vertical";
|
|
245
243
|
function getValuePercentFn(value) {
|
|
246
|
-
return
|
|
244
|
+
return utils.getValuePercent(value, state.context.min, state.context.max);
|
|
247
245
|
}
|
|
248
246
|
function getPercentValueFn(percent) {
|
|
249
|
-
return
|
|
247
|
+
return utils.getPercentValue(percent, state.context.min, state.context.max, state.context.step);
|
|
250
248
|
}
|
|
251
249
|
return {
|
|
252
250
|
value: state.context.value,
|
|
@@ -390,7 +388,7 @@ function connect(state, send, normalize) {
|
|
|
390
388
|
onKeyDown(event) {
|
|
391
389
|
if (event.defaultPrevented) return;
|
|
392
390
|
if (!interactive) return;
|
|
393
|
-
const step =
|
|
391
|
+
const step = domQuery.getEventStep(event) * state.context.step;
|
|
394
392
|
const keyMap = {
|
|
395
393
|
ArrowUp() {
|
|
396
394
|
if (isHorizontal) return;
|
|
@@ -421,7 +419,7 @@ function connect(state, send, normalize) {
|
|
|
421
419
|
send("END");
|
|
422
420
|
}
|
|
423
421
|
};
|
|
424
|
-
const key =
|
|
422
|
+
const key = domQuery.getEventKey(event, state.context);
|
|
425
423
|
const exec = keyMap[key];
|
|
426
424
|
if (exec) {
|
|
427
425
|
exec(event);
|
|
@@ -468,9 +466,9 @@ function connect(state, send, normalize) {
|
|
|
468
466
|
style: dom.getControlStyle(),
|
|
469
467
|
onPointerDown(event) {
|
|
470
468
|
if (!interactive) return;
|
|
471
|
-
if (!
|
|
472
|
-
if (
|
|
473
|
-
const point =
|
|
469
|
+
if (!domQuery.isLeftClick(event)) return;
|
|
470
|
+
if (domQuery.isModifierKey(event)) return;
|
|
471
|
+
const point = domQuery.getEventPoint(event);
|
|
474
472
|
send({ type: "POINTER_DOWN", point });
|
|
475
473
|
event.preventDefault();
|
|
476
474
|
event.stopPropagation();
|
|
@@ -560,7 +558,7 @@ function machine(userContext) {
|
|
|
560
558
|
isInteractive: (ctx2) => !(ctx2.readOnly || ctx2.isDisabled),
|
|
561
559
|
hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize != null,
|
|
562
560
|
valuePercent(ctx2) {
|
|
563
|
-
return ctx2.value.map((value) => 100 *
|
|
561
|
+
return ctx2.value.map((value) => 100 * utils.getValuePercent(value, ctx2.min, ctx2.max));
|
|
564
562
|
}
|
|
565
563
|
},
|
|
566
564
|
watch: {
|
|
@@ -660,7 +658,7 @@ function machine(userContext) {
|
|
|
660
658
|
});
|
|
661
659
|
},
|
|
662
660
|
trackPointerMove(ctx2, _evt, { send }) {
|
|
663
|
-
return
|
|
661
|
+
return domQuery.trackPointerMove(dom.getDoc(ctx2), {
|
|
664
662
|
onPointerMove(info) {
|
|
665
663
|
send({ type: "POINTER_MOVE", point: info.point });
|
|
666
664
|
},
|
package/dist/index.mjs
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { createAnatomy } from '@zag-js/anatomy';
|
|
2
|
-
import { getRelativePoint, getEventStep, getEventKey, isLeftClick, isModifierKey, getEventPoint, trackPointerMove } from '@zag-js/dom-
|
|
3
|
-
import {
|
|
4
|
-
import { getPercentValue, getValuePercent, getValueRanges, snapValueToStep, clampValue, getPreviousStepValue, getNextStepValue, getClosestValueIndex, getValueTransformer } from '@zag-js/numeric-range';
|
|
2
|
+
import { createScope, queryAll, getRelativePoint, dataAttr, ariaAttr, getEventStep, getEventKey, isLeftClick, isModifierKey, getEventPoint, trackPointerMove, raf } from '@zag-js/dom-query';
|
|
3
|
+
import { getPercentValue, createSplitProps, compact, getValuePercent, isEqual, getValueRanges, snapValueToStep, clampValue, getPreviousStepValue, getNextStepValue, getClosestValueIndex, getValueTransformer } from '@zag-js/utils';
|
|
5
4
|
import { dispatchInputValueEvent, trackFormControl } from '@zag-js/form-utils';
|
|
6
5
|
import { createMachine } from '@zag-js/core';
|
|
7
6
|
import { trackElementsSize } from '@zag-js/element-size';
|
|
8
|
-
import { createSplitProps, compact, isEqual } from '@zag-js/utils';
|
|
9
7
|
import { createProps } from '@zag-js/types';
|
|
10
8
|
|
|
11
9
|
// src/slider.anatomy.ts
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/slider",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.81.1",
|
|
4
4
|
"description": "Core logic for the slider widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -27,15 +27,13 @@
|
|
|
27
27
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@zag-js/anatomy": "0.
|
|
31
|
-
"@zag-js/core": "0.
|
|
32
|
-
"@zag-js/form-utils": "0.
|
|
33
|
-
"@zag-js/dom-query": "0.
|
|
34
|
-
"@zag-js/
|
|
35
|
-
"@zag-js/
|
|
36
|
-
"@zag-js/
|
|
37
|
-
"@zag-js/element-size": "0.80.0",
|
|
38
|
-
"@zag-js/types": "0.80.0"
|
|
30
|
+
"@zag-js/anatomy": "0.81.1",
|
|
31
|
+
"@zag-js/core": "0.81.1",
|
|
32
|
+
"@zag-js/form-utils": "0.81.1",
|
|
33
|
+
"@zag-js/dom-query": "0.81.1",
|
|
34
|
+
"@zag-js/utils": "0.81.1",
|
|
35
|
+
"@zag-js/element-size": "0.81.1",
|
|
36
|
+
"@zag-js/types": "0.81.1"
|
|
39
37
|
},
|
|
40
38
|
"devDependencies": {
|
|
41
39
|
"clean-package": "2.2.0"
|