@zag-js/slider 0.0.0-dev-20220616105639 → 0.0.0-dev-20220617101836

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 (4) hide show
  1. package/dist/index.js +10 -64
  2. package/dist/index.mjs +10 -64
  3. package/dist/slider.types.d.ts +7 -0
  4. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -75,68 +75,6 @@ var runIfFn = (v, ...a) => {
75
75
  var noop = () => {
76
76
  };
77
77
  var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
78
- function getListenerElements() {
79
- ;
80
- globalThis.__listenerElements__ = globalThis.__listenerElements__ || /* @__PURE__ */ new Map();
81
- return globalThis.__listenerElements__;
82
- }
83
- function getListenerCache() {
84
- ;
85
- globalThis.__listenerCache__ = globalThis.__listenerCache__ || /* @__PURE__ */ new Map();
86
- return globalThis.__listenerCache__;
87
- }
88
- function addGlobalEventListener(node, type, handler, options) {
89
- var _a;
90
- if (!node)
91
- return noop;
92
- const hash = JSON.stringify({ type, options });
93
- const listenerElements = getListenerElements();
94
- const listenerCache = getListenerCache();
95
- const group = listenerElements.get(node);
96
- if (!listenerElements.has(node)) {
97
- const group2 = /* @__PURE__ */ new Map([[hash, /* @__PURE__ */ new Set([handler])]]);
98
- listenerElements.set(node, group2);
99
- } else if (group == null ? void 0 : group.has(hash)) {
100
- (_a = group == null ? void 0 : group.get(hash)) == null ? void 0 : _a.add(handler);
101
- } else {
102
- group == null ? void 0 : group.set(hash, /* @__PURE__ */ new Set([handler]));
103
- }
104
- function attach(node2) {
105
- var _a2, _b;
106
- function listener(event) {
107
- var _a3;
108
- const group2 = listenerElements.get(node2);
109
- (_a3 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a3.forEach((fn) => fn(event));
110
- }
111
- if (!(listenerCache == null ? void 0 : listenerCache.has(node2))) {
112
- listenerCache.set(node2, /* @__PURE__ */ new Map([[hash, listener]]));
113
- node2.addEventListener(type, listener, options);
114
- return;
115
- }
116
- if (!((_a2 = listenerCache == null ? void 0 : listenerCache.get(node2)) == null ? void 0 : _a2.has(hash))) {
117
- (_b = listenerCache.get(node2)) == null ? void 0 : _b.set(hash, listener);
118
- node2.addEventListener(type, listener, options);
119
- }
120
- }
121
- attach(node);
122
- return function remove() {
123
- var _a2, _b, _c, _d;
124
- if (!listenerElements.has(node))
125
- return;
126
- const group2 = listenerElements.get(node);
127
- (_a2 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a2.delete(handler);
128
- if (((_b = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _b.size) === 0) {
129
- const listener = (_c = listenerCache.get(node)) == null ? void 0 : _c.get(hash);
130
- node.removeEventListener(type, listener, options);
131
- group2 == null ? void 0 : group2.delete(hash);
132
- (_d = listenerCache.get(node)) == null ? void 0 : _d.delete(hash);
133
- if ((group2 == null ? void 0 : group2.size) === 0) {
134
- listenerElements.delete(node);
135
- listenerCache.delete(node);
136
- }
137
- }
138
- };
139
- }
140
78
  var isRef = (v) => hasProp(v, "current");
141
79
  var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
142
80
  function extractInfo(event, type = "page") {
@@ -148,9 +86,12 @@ function extractInfo(event, type = "page") {
148
86
  }
149
87
  };
150
88
  }
151
- function addDomEvent(target, event, listener, options) {
89
+ function addDomEvent(target, eventName, handler, options) {
152
90
  const node = isRef(target) ? target.current : runIfFn(target);
153
- return addGlobalEventListener(node, event, listener, options);
91
+ node == null ? void 0 : node.addEventListener(eventName, handler, options);
92
+ return () => {
93
+ node == null ? void 0 : node.removeEventListener(eventName, handler, options);
94
+ };
154
95
  }
155
96
  function addPointerEvent(target, event, listener, options) {
156
97
  var _a;
@@ -482,6 +423,8 @@ function getHorizontalThumbOffset(ctx) {
482
423
  }
483
424
  function getThumbOffset(ctx) {
484
425
  const percent = valueToPercent(ctx.value, ctx);
426
+ if (ctx.thumbAlignment === "center")
427
+ return `${percent}%`;
485
428
  const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
486
429
  return `calc(${percent}% - ${offset}px)`;
487
430
  }
@@ -888,6 +831,7 @@ function machine(ctx = {}) {
888
831
  initial: "unknown",
889
832
  context: __spreadValues({
890
833
  thumbSize: null,
834
+ thumbAlignment: "contain",
891
835
  uid: "",
892
836
  disabled: false,
893
837
  threshold: 5,
@@ -1060,6 +1004,8 @@ function machine(ctx = {}) {
1060
1004
  dom.dispatchChangeEvent(ctx2);
1061
1005
  },
1062
1006
  setThumbSize(ctx2) {
1007
+ if (ctx2.thumbAlignment !== "contain")
1008
+ return;
1063
1009
  raf(() => {
1064
1010
  const el = dom.getThumbEl(ctx2);
1065
1011
  if (!el)
package/dist/index.mjs CHANGED
@@ -51,68 +51,6 @@ var runIfFn = (v, ...a) => {
51
51
  var noop = () => {
52
52
  };
53
53
  var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
54
- function getListenerElements() {
55
- ;
56
- globalThis.__listenerElements__ = globalThis.__listenerElements__ || /* @__PURE__ */ new Map();
57
- return globalThis.__listenerElements__;
58
- }
59
- function getListenerCache() {
60
- ;
61
- globalThis.__listenerCache__ = globalThis.__listenerCache__ || /* @__PURE__ */ new Map();
62
- return globalThis.__listenerCache__;
63
- }
64
- function addGlobalEventListener(node, type, handler, options) {
65
- var _a;
66
- if (!node)
67
- return noop;
68
- const hash = JSON.stringify({ type, options });
69
- const listenerElements = getListenerElements();
70
- const listenerCache = getListenerCache();
71
- const group = listenerElements.get(node);
72
- if (!listenerElements.has(node)) {
73
- const group2 = /* @__PURE__ */ new Map([[hash, /* @__PURE__ */ new Set([handler])]]);
74
- listenerElements.set(node, group2);
75
- } else if (group == null ? void 0 : group.has(hash)) {
76
- (_a = group == null ? void 0 : group.get(hash)) == null ? void 0 : _a.add(handler);
77
- } else {
78
- group == null ? void 0 : group.set(hash, /* @__PURE__ */ new Set([handler]));
79
- }
80
- function attach(node2) {
81
- var _a2, _b;
82
- function listener(event) {
83
- var _a3;
84
- const group2 = listenerElements.get(node2);
85
- (_a3 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a3.forEach((fn) => fn(event));
86
- }
87
- if (!(listenerCache == null ? void 0 : listenerCache.has(node2))) {
88
- listenerCache.set(node2, /* @__PURE__ */ new Map([[hash, listener]]));
89
- node2.addEventListener(type, listener, options);
90
- return;
91
- }
92
- if (!((_a2 = listenerCache == null ? void 0 : listenerCache.get(node2)) == null ? void 0 : _a2.has(hash))) {
93
- (_b = listenerCache.get(node2)) == null ? void 0 : _b.set(hash, listener);
94
- node2.addEventListener(type, listener, options);
95
- }
96
- }
97
- attach(node);
98
- return function remove() {
99
- var _a2, _b, _c, _d;
100
- if (!listenerElements.has(node))
101
- return;
102
- const group2 = listenerElements.get(node);
103
- (_a2 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a2.delete(handler);
104
- if (((_b = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _b.size) === 0) {
105
- const listener = (_c = listenerCache.get(node)) == null ? void 0 : _c.get(hash);
106
- node.removeEventListener(type, listener, options);
107
- group2 == null ? void 0 : group2.delete(hash);
108
- (_d = listenerCache.get(node)) == null ? void 0 : _d.delete(hash);
109
- if ((group2 == null ? void 0 : group2.size) === 0) {
110
- listenerElements.delete(node);
111
- listenerCache.delete(node);
112
- }
113
- }
114
- };
115
- }
116
54
  var isRef = (v) => hasProp(v, "current");
117
55
  var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
118
56
  function extractInfo(event, type = "page") {
@@ -124,9 +62,12 @@ function extractInfo(event, type = "page") {
124
62
  }
125
63
  };
126
64
  }
127
- function addDomEvent(target, event, listener, options) {
65
+ function addDomEvent(target, eventName, handler, options) {
128
66
  const node = isRef(target) ? target.current : runIfFn(target);
129
- return addGlobalEventListener(node, event, listener, options);
67
+ node == null ? void 0 : node.addEventListener(eventName, handler, options);
68
+ return () => {
69
+ node == null ? void 0 : node.removeEventListener(eventName, handler, options);
70
+ };
130
71
  }
131
72
  function addPointerEvent(target, event, listener, options) {
132
73
  var _a;
@@ -458,6 +399,8 @@ function getHorizontalThumbOffset(ctx) {
458
399
  }
459
400
  function getThumbOffset(ctx) {
460
401
  const percent = valueToPercent(ctx.value, ctx);
402
+ if (ctx.thumbAlignment === "center")
403
+ return `${percent}%`;
461
404
  const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
462
405
  return `calc(${percent}% - ${offset}px)`;
463
406
  }
@@ -864,6 +807,7 @@ function machine(ctx = {}) {
864
807
  initial: "unknown",
865
808
  context: __spreadValues({
866
809
  thumbSize: null,
810
+ thumbAlignment: "contain",
867
811
  uid: "",
868
812
  disabled: false,
869
813
  threshold: 5,
@@ -1036,6 +980,8 @@ function machine(ctx = {}) {
1036
980
  dom.dispatchChangeEvent(ctx2);
1037
981
  },
1038
982
  setThumbSize(ctx2) {
983
+ if (ctx2.thumbAlignment !== "contain")
984
+ return;
1039
985
  raf(() => {
1040
986
  const el = dom.getThumbEl(ctx2);
1041
987
  if (!el)
package/dist/slider.types.d.ts CHANGED
@@ -89,6 +89,12 @@ declare type PublicContext = DirectionProperty & {
89
89
  onChangeStart?(details: {
90
90
  value: number;
91
91
  }): void;
92
+ /**
93
+ * The alignment of the slider thumb relative to the track
94
+ * - `center`: the thumb will extend beyond the bounds of the slider track.
95
+ * - `contain`: the thumb will be contained within the bounds of the track.
96
+ */
97
+ thumbAlignment?: "contain" | "center";
92
98
  };
93
99
  export declare type UserDefinedContext = Partial<PublicContext>;
94
100
  declare type ComputedContext = Readonly<{
@@ -156,6 +162,7 @@ export declare type SharedContext = {
156
162
  width: number;
157
163
  height: number;
158
164
  } | null;
165
+ thumbAlignment?: "contain" | "center";
159
166
  orientation?: "horizontal" | "vertical";
160
167
  readonly hasMeasuredThumbSize: boolean;
161
168
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/slider",
3
- "version": "0.0.0-dev-20220616105639",
3
+ "version": "0.0.0-dev-20220617101836",
4
4
  "description": "Core logic for the slider widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -30,10 +30,10 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@zag-js/core": "0.1.6",
33
- "@zag-js/dom-utils": "0.0.0-dev-20220616105639",
33
+ "@zag-js/dom-utils": "0.0.0-dev-20220617101836",
34
34
  "@zag-js/number-utils": "0.1.2",
35
35
  "@zag-js/rect-utils": "0.1.2",
36
- "@zag-js/types": "0.0.0-dev-20220616105639",
36
+ "@zag-js/types": "0.0.0-dev-20220617101836",
37
37
  "@zag-js/utils": "0.1.2"
38
38
  },
39
39
  "scripts": {