@zag-js/slider 0.0.0-dev-20230523135722 → 0.0.0-dev-20230526204018

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.
Files changed (13) hide show
  1. package/dist/{chunk-JG4OWFJP.mjs → chunk-NYN3VIY4.mjs} +8 -14
  2. package/dist/{chunk-CNR2557J.mjs → chunk-OCT2YBMN.mjs} +1 -1
  3. package/dist/{chunk-TMLAO23S.mjs → chunk-T6GXNUP7.mjs} +1 -1
  4. package/dist/index.js +8 -14
  5. package/dist/index.mjs +3 -3
  6. package/dist/slider.connect.js +8 -14
  7. package/dist/slider.connect.mjs +2 -2
  8. package/dist/slider.dom.d.ts +1 -1
  9. package/dist/slider.dom.js +8 -14
  10. package/dist/slider.dom.mjs +1 -1
  11. package/dist/slider.machine.js +8 -14
  12. package/dist/slider.machine.mjs +2 -2
  13. package/package.json +10 -10
package/dist/{chunk-JG4OWFJP.mjs → chunk-NYN3VIY4.mjs} RENAMED
@@ -3,8 +3,8 @@ import {
3
3
  } from "./chunk-IJAAAKZQ.mjs";
4
4
 
5
5
  // src/slider.dom.ts
6
+ import { getRelativePoint } from "@zag-js/dom-event";
6
7
  import { createScope } from "@zag-js/dom-query";
7
- import { getRelativePointValue } from "@zag-js/dom-event";
8
8
  import { dispatchInputValueEvent } from "@zag-js/form-utils";
9
9
  import { getPercentValue } from "@zag-js/numeric-range";
10
10
  var dom = createScope({
@@ -20,21 +20,15 @@ var dom = createScope({
20
20
  getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
21
21
  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
22
22
  getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
23
- getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
23
+ getControlEl: (ctx) => dom.queryById(ctx, dom.getControlId(ctx)),
24
24
  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
25
25
  getValueFromPoint(ctx, point) {
26
- const el = dom.getControlEl(ctx);
27
- if (!el)
28
- return;
29
- const relativePoint = getRelativePointValue(point, el);
30
- const percentX = relativePoint.x / el.offsetWidth;
31
- const percentY = relativePoint.y / el.offsetHeight;
32
- let percent;
33
- if (ctx.isHorizontal) {
34
- percent = ctx.isRtl ? 1 - percentX : percentX;
35
- } else {
36
- percent = 1 - percentY;
37
- }
26
+ const relativePoint = getRelativePoint(point, dom.getControlEl(ctx));
27
+ const percent = relativePoint.getPercentValue({
28
+ orientation: ctx.orientation,
29
+ dir: ctx.dir,
30
+ inverted: { y: true }
31
+ });
38
32
  return getPercentValue(percent, ctx.min, ctx.max, ctx.step);
39
33
  },
40
34
  dispatchChangeEvent(ctx) {
package/dist/{chunk-CNR2557J.mjs → chunk-OCT2YBMN.mjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  dom
3
- } from "./chunk-JG4OWFJP.mjs";
3
+ } from "./chunk-NYN3VIY4.mjs";
4
4
  import {
5
5
  constrainValue,
6
6
  decrement,
package/dist/{chunk-TMLAO23S.mjs → chunk-T6GXNUP7.mjs} RENAMED
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-3Y7IIPR5.mjs";
4
4
  import {
5
5
  dom
6
- } from "./chunk-JG4OWFJP.mjs";
6
+ } from "./chunk-NYN3VIY4.mjs";
7
7
 
8
8
  // src/slider.connect.ts
9
9
  import {
package/dist/index.js CHANGED
@@ -49,8 +49,8 @@ var import_dom_query2 = require("@zag-js/dom-query");
49
49
  var import_numeric_range3 = require("@zag-js/numeric-range");
50
50
 
51
51
  // src/slider.dom.ts
52
- var import_dom_query = require("@zag-js/dom-query");
53
52
  var import_dom_event = require("@zag-js/dom-event");
53
+ var import_dom_query = require("@zag-js/dom-query");
54
54
  var import_form_utils = require("@zag-js/form-utils");
55
55
  var import_numeric_range2 = require("@zag-js/numeric-range");
56
56
 
@@ -180,21 +180,15 @@ var dom = (0, import_dom_query.createScope)({
180
180
  getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
181
181
  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
182
182
  getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
183
- getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
183
+ getControlEl: (ctx) => dom.queryById(ctx, dom.getControlId(ctx)),
184
184
  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
185
185
  getValueFromPoint(ctx, point) {
186
- const el = dom.getControlEl(ctx);
187
- if (!el)
188
- return;
189
- const relativePoint = (0, import_dom_event.getRelativePointValue)(point, el);
190
- const percentX = relativePoint.x / el.offsetWidth;
191
- const percentY = relativePoint.y / el.offsetHeight;
192
- let percent;
193
- if (ctx.isHorizontal) {
194
- percent = ctx.isRtl ? 1 - percentX : percentX;
195
- } else {
196
- percent = 1 - percentY;
197
- }
186
+ const relativePoint = (0, import_dom_event.getRelativePoint)(point, dom.getControlEl(ctx));
187
+ const percent = relativePoint.getPercentValue({
188
+ orientation: ctx.orientation,
189
+ dir: ctx.dir,
190
+ inverted: { y: true }
191
+ });
198
192
  return (0, import_numeric_range2.getPercentValue)(percent, ctx.min, ctx.max, ctx.step);
199
193
  },
200
194
  dispatchChangeEvent(ctx) {
package/dist/index.mjs CHANGED
@@ -1,15 +1,15 @@
1
1
  import {
2
2
  connect
3
- } from "./chunk-TMLAO23S.mjs";
3
+ } from "./chunk-T6GXNUP7.mjs";
4
4
  import {
5
5
  anatomy
6
6
  } from "./chunk-3Y7IIPR5.mjs";
7
7
  import {
8
8
  machine
9
- } from "./chunk-CNR2557J.mjs";
9
+ } from "./chunk-OCT2YBMN.mjs";
10
10
  import {
11
11
  dom
12
- } from "./chunk-JG4OWFJP.mjs";
12
+ } from "./chunk-NYN3VIY4.mjs";
13
13
  import "./chunk-IJAAAKZQ.mjs";
14
14
  import "./chunk-YGFSMEUO.mjs";
15
15
  export {
package/dist/slider.connect.js CHANGED
@@ -44,8 +44,8 @@ var anatomy = (0, import_anatomy.createAnatomy)("slider").parts(
44
44
  var parts = anatomy.build();
45
45
 
46
46
  // src/slider.dom.ts
47
- var import_dom_query = require("@zag-js/dom-query");
48
47
  var import_dom_event = require("@zag-js/dom-event");
48
+ var import_dom_query = require("@zag-js/dom-query");
49
49
  var import_form_utils = require("@zag-js/form-utils");
50
50
  var import_numeric_range2 = require("@zag-js/numeric-range");
51
51
 
@@ -175,21 +175,15 @@ var dom = (0, import_dom_query.createScope)({
175
175
  getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
176
176
  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
177
177
  getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
178
- getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
178
+ getControlEl: (ctx) => dom.queryById(ctx, dom.getControlId(ctx)),
179
179
  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
180
180
  getValueFromPoint(ctx, point) {
181
- const el = dom.getControlEl(ctx);
182
- if (!el)
183
- return;
184
- const relativePoint = (0, import_dom_event.getRelativePointValue)(point, el);
185
- const percentX = relativePoint.x / el.offsetWidth;
186
- const percentY = relativePoint.y / el.offsetHeight;
187
- let percent;
188
- if (ctx.isHorizontal) {
189
- percent = ctx.isRtl ? 1 - percentX : percentX;
190
- } else {
191
- percent = 1 - percentY;
192
- }
181
+ const relativePoint = (0, import_dom_event.getRelativePoint)(point, dom.getControlEl(ctx));
182
+ const percent = relativePoint.getPercentValue({
183
+ orientation: ctx.orientation,
184
+ dir: ctx.dir,
185
+ inverted: { y: true }
186
+ });
193
187
  return (0, import_numeric_range2.getPercentValue)(percent, ctx.min, ctx.max, ctx.step);
194
188
  },
195
189
  dispatchChangeEvent(ctx) {
package/dist/slider.connect.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  connect
3
- } from "./chunk-TMLAO23S.mjs";
3
+ } from "./chunk-T6GXNUP7.mjs";
4
4
  import "./chunk-3Y7IIPR5.mjs";
5
- import "./chunk-JG4OWFJP.mjs";
5
+ import "./chunk-NYN3VIY4.mjs";
6
6
  import "./chunk-IJAAAKZQ.mjs";
7
7
  export {
8
8
  connect
package/dist/slider.dom.d.ts CHANGED
@@ -33,7 +33,7 @@ declare const dom: {
33
33
  getMarkerId: (ctx: MachineContext, value: number) => string;
34
34
  getRootEl: (ctx: MachineContext) => HTMLElement | null;
35
35
  getThumbEl: (ctx: MachineContext) => HTMLElement | null;
36
- getControlEl: (ctx: MachineContext) => HTMLElement | null;
36
+ getControlEl: (ctx: MachineContext) => HTMLElement;
37
37
  getHiddenInputEl: (ctx: MachineContext) => HTMLInputElement | null;
38
38
  getValueFromPoint(ctx: MachineContext, point: Point): number | undefined;
39
39
  dispatchChangeEvent(ctx: MachineContext): void;
package/dist/slider.dom.js CHANGED
@@ -23,8 +23,8 @@ __export(slider_dom_exports, {
23
23
  dom: () => dom
24
24
  });
25
25
  module.exports = __toCommonJS(slider_dom_exports);
26
- var import_dom_query = require("@zag-js/dom-query");
27
26
  var import_dom_event = require("@zag-js/dom-event");
27
+ var import_dom_query = require("@zag-js/dom-query");
28
28
  var import_form_utils = require("@zag-js/form-utils");
29
29
  var import_numeric_range2 = require("@zag-js/numeric-range");
30
30
 
@@ -154,21 +154,15 @@ var dom = (0, import_dom_query.createScope)({
154
154
  getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
155
155
  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
156
156
  getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
157
- getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
157
+ getControlEl: (ctx) => dom.queryById(ctx, dom.getControlId(ctx)),
158
158
  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
159
159
  getValueFromPoint(ctx, point) {
160
- const el = dom.getControlEl(ctx);
161
- if (!el)
162
- return;
163
- const relativePoint = (0, import_dom_event.getRelativePointValue)(point, el);
164
- const percentX = relativePoint.x / el.offsetWidth;
165
- const percentY = relativePoint.y / el.offsetHeight;
166
- let percent;
167
- if (ctx.isHorizontal) {
168
- percent = ctx.isRtl ? 1 - percentX : percentX;
169
- } else {
170
- percent = 1 - percentY;
171
- }
160
+ const relativePoint = (0, import_dom_event.getRelativePoint)(point, dom.getControlEl(ctx));
161
+ const percent = relativePoint.getPercentValue({
162
+ orientation: ctx.orientation,
163
+ dir: ctx.dir,
164
+ inverted: { y: true }
165
+ });
172
166
  return (0, import_numeric_range2.getPercentValue)(percent, ctx.min, ctx.max, ctx.step);
173
167
  },
174
168
  dispatchChangeEvent(ctx) {
package/dist/slider.dom.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  dom
3
- } from "./chunk-JG4OWFJP.mjs";
3
+ } from "./chunk-NYN3VIY4.mjs";
4
4
  import "./chunk-IJAAAKZQ.mjs";
5
5
  export {
6
6
  dom
package/dist/slider.machine.js CHANGED
@@ -32,8 +32,8 @@ var import_numeric_range4 = require("@zag-js/numeric-range");
32
32
  var import_utils = require("@zag-js/utils");
33
33
 
34
34
  // src/slider.dom.ts
35
- var import_dom_query = require("@zag-js/dom-query");
36
35
  var import_dom_event = require("@zag-js/dom-event");
36
+ var import_dom_query = require("@zag-js/dom-query");
37
37
  var import_form_utils = require("@zag-js/form-utils");
38
38
  var import_numeric_range2 = require("@zag-js/numeric-range");
39
39
 
@@ -163,21 +163,15 @@ var dom = (0, import_dom_query.createScope)({
163
163
  getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
164
164
  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
165
165
  getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
166
- getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
166
+ getControlEl: (ctx) => dom.queryById(ctx, dom.getControlId(ctx)),
167
167
  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
168
168
  getValueFromPoint(ctx, point) {
169
- const el = dom.getControlEl(ctx);
170
- if (!el)
171
- return;
172
- const relativePoint = (0, import_dom_event.getRelativePointValue)(point, el);
173
- const percentX = relativePoint.x / el.offsetWidth;
174
- const percentY = relativePoint.y / el.offsetHeight;
175
- let percent;
176
- if (ctx.isHorizontal) {
177
- percent = ctx.isRtl ? 1 - percentX : percentX;
178
- } else {
179
- percent = 1 - percentY;
180
- }
169
+ const relativePoint = (0, import_dom_event.getRelativePoint)(point, dom.getControlEl(ctx));
170
+ const percent = relativePoint.getPercentValue({
171
+ orientation: ctx.orientation,
172
+ dir: ctx.dir,
173
+ inverted: { y: true }
174
+ });
181
175
  return (0, import_numeric_range2.getPercentValue)(percent, ctx.min, ctx.max, ctx.step);
182
176
  },
183
177
  dispatchChangeEvent(ctx) {
package/dist/slider.machine.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  machine
3
- } from "./chunk-CNR2557J.mjs";
4
- import "./chunk-JG4OWFJP.mjs";
3
+ } from "./chunk-OCT2YBMN.mjs";
4
+ import "./chunk-NYN3VIY4.mjs";
5
5
  import "./chunk-IJAAAKZQ.mjs";
6
6
  import "./chunk-YGFSMEUO.mjs";
7
7
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/slider",
3
- "version": "0.0.0-dev-20230523135722",
3
+ "version": "0.0.0-dev-20230526204018",
4
4
  "description": "Core logic for the slider widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -26,15 +26,15 @@
26
26
  "url": "https://github.com/chakra-ui/zag/issues"
27
27
  },
28
28
  "dependencies": {
29
- "@zag-js/anatomy": "0.0.0-dev-20230523135722",
30
- "@zag-js/core": "0.0.0-dev-20230523135722",
31
- "@zag-js/dom-query": "0.0.0-dev-20230523135722",
32
- "@zag-js/dom-event": "0.0.0-dev-20230523135722",
33
- "@zag-js/form-utils": "0.0.0-dev-20230523135722",
34
- "@zag-js/utils": "0.0.0-dev-20230523135722",
35
- "@zag-js/element-size": "0.0.0-dev-20230523135722",
36
- "@zag-js/numeric-range": "0.0.0-dev-20230523135722",
37
- "@zag-js/types": "0.0.0-dev-20230523135722"
29
+ "@zag-js/anatomy": "0.0.0-dev-20230526204018",
30
+ "@zag-js/core": "0.0.0-dev-20230526204018",
31
+ "@zag-js/dom-query": "0.0.0-dev-20230526204018",
32
+ "@zag-js/dom-event": "0.0.0-dev-20230526204018",
33
+ "@zag-js/form-utils": "0.0.0-dev-20230526204018",
34
+ "@zag-js/utils": "0.0.0-dev-20230526204018",
35
+ "@zag-js/element-size": "0.0.0-dev-20230526204018",
36
+ "@zag-js/numeric-range": "0.0.0-dev-20230526204018",
37
+ "@zag-js/types": "0.0.0-dev-20230526204018"
38
38
  },
39
39
  "devDependencies": {
40
40
  "clean-package": "2.2.0"