@sit-onyx/headless 0.3.0-dev-20251028142054 → 0.3.0-dev-20251029130423

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 (6) hide show
  1. package/dist/composables/slider/DiscreteSlider.d.vue.ts +10 -19
  2. package/dist/composables/slider/RangeSlider.d.vue.ts +10 -19
  3. package/dist/composables/slider/SimpleSlider.d.vue.ts +10 -19
  4. package/dist/composables/slider/createSlider.d.ts +10 -48
  5. package/dist/index.js +56 -108
  6. package/package.json +1 -1
package/dist/composables/slider/DiscreteSlider.d.vue.ts CHANGED
@@ -3,7 +3,7 @@ declare const _default: import('vue').DefineComponent<{}, {
3
3
  root: import('vue').ComputedRef<{
4
4
  ref: import('../../index.js', { with: { "resolution-mode": "import" } }).HeadlessElRef<HTMLElement>;
5
5
  style: {
6
- touchAction: "pan-x" | "pan-y";
6
+ touchAction: "pan-y";
7
7
  };
8
8
  onMousedown: (event: MouseEvent) => void;
9
9
  onTouchstart: (event: TouchEvent) => void;
@@ -14,7 +14,7 @@ declare const _default: import('vue').DefineComponent<{}, {
14
14
  }) => {
15
15
  "data-index": number;
16
16
  style: {
17
- [x: string]: string;
17
+ left: string;
18
18
  };
19
19
  }>;
20
20
  thumbInput: import('vue').ComputedRef<(data: {
@@ -30,7 +30,7 @@ declare const _default: import('vue').DefineComponent<{}, {
30
30
  "aria-valuemin": number;
31
31
  "aria-valuemax": number;
32
32
  "aria-valuenow": number;
33
- "aria-orientation": import('./createSlider.js', { with: { "resolution-mode": "import" } }).SliderOrientation;
33
+ "aria-orientation": "horizontal";
34
34
  "data-index": number;
35
35
  tabIndex: number;
36
36
  step: string | number;
@@ -43,11 +43,12 @@ declare const _default: import('vue').DefineComponent<{}, {
43
43
  mark: import('vue').ComputedRef<(data: {
44
44
  value: number;
45
45
  label?: string;
46
+ positionOffset?: string;
46
47
  }) => {
47
48
  "data-value": number;
48
49
  "aria-hidden": true;
49
50
  style: {
50
- [x: string]: string;
51
+ left: string;
51
52
  };
52
53
  }>;
53
54
  markLabel: import('vue').ComputedRef<(data: {
@@ -55,7 +56,7 @@ declare const _default: import('vue').DefineComponent<{}, {
55
56
  }) => {
56
57
  "data-value": number;
57
58
  style: {
58
- [x: string]: string;
59
+ left: string;
59
60
  };
60
61
  "aria-hidden": true;
61
62
  }>;
@@ -63,7 +64,8 @@ declare const _default: import('vue').DefineComponent<{}, {
63
64
  role: string;
64
65
  "aria-hidden": true;
65
66
  style: {
66
- [x: string]: string;
67
+ left: string;
68
+ width: string;
67
69
  };
68
70
  }>;
69
71
  rail: import('vue').ComputedRef<{
@@ -73,7 +75,6 @@ declare const _default: import('vue').DefineComponent<{}, {
73
75
  }, {
74
76
  isDragging: import('vue').Ref<boolean, boolean>;
75
77
  activeThumbIndex: import('vue').Ref<number, number>;
76
- focusedThumbIndex: import('vue').Ref<number, number>;
77
78
  isRange: import('vue').ComputedRef<boolean>;
78
79
  trackOffset: import('vue').ComputedRef<number>;
79
80
  trackLength: import('vue').ComputedRef<number>;
@@ -81,21 +82,11 @@ declare const _default: import('vue').DefineComponent<{}, {
81
82
  value: number;
82
83
  label?: string;
83
84
  }[]>;
85
+ shiftStep: import('vue').ComputedRef<number>;
86
+ normalizedValues: import('vue').ComputedRef<number[]>;
84
87
  }, {
85
- valueToPercent: import('vue').ComputedRef<(value: number) => number>;
86
- isMarkActive: import('vue').ComputedRef<(markValue: number) => boolean>;
87
88
  clampValue: import('vue').ComputedRef<(value: number) => number>;
88
- axis: import('vue').ComputedRef<{
89
- position: "bottom";
90
- size: "height";
91
- cross: "width";
92
- } | {
93
- position: "left";
94
- size: "width";
95
- cross: "height";
96
- }>;
97
89
  roundToStep: import('vue').ComputedRef<(value: number) => number | undefined>;
98
- normalizeValues: import('vue').ComputedRef<(values: number[]) => number[]>;
99
90
  }>;
100
91
  }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
101
92
  export default _default;
package/dist/composables/slider/RangeSlider.d.vue.ts CHANGED
@@ -3,7 +3,7 @@ declare const _default: import('vue').DefineComponent<{}, {
3
3
  root: import('vue').ComputedRef<{
4
4
  ref: import('../../index.js', { with: { "resolution-mode": "import" } }).HeadlessElRef<HTMLElement>;
5
5
  style: {
6
- touchAction: "pan-x" | "pan-y";
6
+ touchAction: "pan-y";
7
7
  };
8
8
  onMousedown: (event: MouseEvent) => void;
9
9
  onTouchstart: (event: TouchEvent) => void;
@@ -14,7 +14,7 @@ declare const _default: import('vue').DefineComponent<{}, {
14
14
  }) => {
15
15
  "data-index": number;
16
16
  style: {
17
- [x: string]: string;
17
+ left: string;
18
18
  };
19
19
  }>;
20
20
  thumbInput: import('vue').ComputedRef<(data: {
@@ -30,7 +30,7 @@ declare const _default: import('vue').DefineComponent<{}, {
30
30
  "aria-valuemin": number;
31
31
  "aria-valuemax": number;
32
32
  "aria-valuenow": number;
33
- "aria-orientation": import('./createSlider.js', { with: { "resolution-mode": "import" } }).SliderOrientation;
33
+ "aria-orientation": "horizontal";
34
34
  "data-index": number;
35
35
  tabIndex: number;
36
36
  step: string | number;
@@ -43,11 +43,12 @@ declare const _default: import('vue').DefineComponent<{}, {
43
43
  mark: import('vue').ComputedRef<(data: {
44
44
  value: number;
45
45
  label?: string;
46
+ positionOffset?: string;
46
47
  }) => {
47
48
  "data-value": number;
48
49
  "aria-hidden": true;
49
50
  style: {
50
- [x: string]: string;
51
+ left: string;
51
52
  };
52
53
  }>;
53
54
  markLabel: import('vue').ComputedRef<(data: {
@@ -55,7 +56,7 @@ declare const _default: import('vue').DefineComponent<{}, {
55
56
  }) => {
56
57
  "data-value": number;
57
58
  style: {
58
- [x: string]: string;
59
+ left: string;
59
60
  };
60
61
  "aria-hidden": true;
61
62
  }>;
@@ -63,7 +64,8 @@ declare const _default: import('vue').DefineComponent<{}, {
63
64
  role: string;
64
65
  "aria-hidden": true;
65
66
  style: {
66
- [x: string]: string;
67
+ left: string;
68
+ width: string;
67
69
  };
68
70
  }>;
69
71
  rail: import('vue').ComputedRef<{
@@ -73,7 +75,6 @@ declare const _default: import('vue').DefineComponent<{}, {
73
75
  }, {
74
76
  isDragging: import('vue').Ref<boolean, boolean>;
75
77
  activeThumbIndex: import('vue').Ref<number, number>;
76
- focusedThumbIndex: import('vue').Ref<number, number>;
77
78
  isRange: import('vue').ComputedRef<boolean>;
78
79
  trackOffset: import('vue').ComputedRef<number>;
79
80
  trackLength: import('vue').ComputedRef<number>;
@@ -81,21 +82,11 @@ declare const _default: import('vue').DefineComponent<{}, {
81
82
  value: number;
82
83
  label?: string;
83
84
  }[]>;
85
+ shiftStep: import('vue').ComputedRef<number>;
86
+ normalizedValues: import('vue').ComputedRef<number[]>;
84
87
  }, {
85
- valueToPercent: import('vue').ComputedRef<(value: number) => number>;
86
- isMarkActive: import('vue').ComputedRef<(markValue: number) => boolean>;
87
88
  clampValue: import('vue').ComputedRef<(value: number) => number>;
88
- axis: import('vue').ComputedRef<{
89
- position: "bottom";
90
- size: "height";
91
- cross: "width";
92
- } | {
93
- position: "left";
94
- size: "width";
95
- cross: "height";
96
- }>;
97
89
  roundToStep: import('vue').ComputedRef<(value: number) => number | undefined>;
98
- normalizeValues: import('vue').ComputedRef<(values: number[]) => number[]>;
99
90
  }>;
100
91
  }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
101
92
  export default _default;
package/dist/composables/slider/SimpleSlider.d.vue.ts CHANGED
@@ -3,7 +3,7 @@ declare const _default: import('vue').DefineComponent<{}, {
3
3
  root: import('vue').ComputedRef<{
4
4
  ref: import('../../index.js', { with: { "resolution-mode": "import" } }).HeadlessElRef<HTMLElement>;
5
5
  style: {
6
- touchAction: "pan-x" | "pan-y";
6
+ touchAction: "pan-y";
7
7
  };
8
8
  onMousedown: (event: MouseEvent) => void;
9
9
  onTouchstart: (event: TouchEvent) => void;
@@ -14,7 +14,7 @@ declare const _default: import('vue').DefineComponent<{}, {
14
14
  }) => {
15
15
  "data-index": number;
16
16
  style: {
17
- [x: string]: string;
17
+ left: string;
18
18
  };
19
19
  }>;
20
20
  thumbInput: import('vue').ComputedRef<(data: {
@@ -30,7 +30,7 @@ declare const _default: import('vue').DefineComponent<{}, {
30
30
  "aria-valuemin": number;
31
31
  "aria-valuemax": number;
32
32
  "aria-valuenow": number;
33
- "aria-orientation": import('./createSlider.js', { with: { "resolution-mode": "import" } }).SliderOrientation;
33
+ "aria-orientation": "horizontal";
34
34
  "data-index": number;
35
35
  tabIndex: number;
36
36
  step: string | number;
@@ -43,11 +43,12 @@ declare const _default: import('vue').DefineComponent<{}, {
43
43
  mark: import('vue').ComputedRef<(data: {
44
44
  value: number;
45
45
  label?: string;
46
+ positionOffset?: string;
46
47
  }) => {
47
48
  "data-value": number;
48
49
  "aria-hidden": true;
49
50
  style: {
50
- [x: string]: string;
51
+ left: string;
51
52
  };
52
53
  }>;
53
54
  markLabel: import('vue').ComputedRef<(data: {
@@ -55,7 +56,7 @@ declare const _default: import('vue').DefineComponent<{}, {
55
56
  }) => {
56
57
  "data-value": number;
57
58
  style: {
58
- [x: string]: string;
59
+ left: string;
59
60
  };
60
61
  "aria-hidden": true;
61
62
  }>;
@@ -63,7 +64,8 @@ declare const _default: import('vue').DefineComponent<{}, {
63
64
  role: string;
64
65
  "aria-hidden": true;
65
66
  style: {
66
- [x: string]: string;
67
+ left: string;
68
+ width: string;
67
69
  };
68
70
  }>;
69
71
  rail: import('vue').ComputedRef<{
@@ -73,7 +75,6 @@ declare const _default: import('vue').DefineComponent<{}, {
73
75
  }, {
74
76
  isDragging: import('vue').Ref<boolean, boolean>;
75
77
  activeThumbIndex: import('vue').Ref<number, number>;
76
- focusedThumbIndex: import('vue').Ref<number, number>;
77
78
  isRange: import('vue').ComputedRef<boolean>;
78
79
  trackOffset: import('vue').ComputedRef<number>;
79
80
  trackLength: import('vue').ComputedRef<number>;
@@ -81,21 +82,11 @@ declare const _default: import('vue').DefineComponent<{}, {
81
82
  value: number;
82
83
  label?: string;
83
84
  }[]>;
85
+ shiftStep: import('vue').ComputedRef<number>;
86
+ normalizedValues: import('vue').ComputedRef<number[]>;
84
87
  }, {
85
- valueToPercent: import('vue').ComputedRef<(value: number) => number>;
86
- isMarkActive: import('vue').ComputedRef<(markValue: number) => boolean>;
87
88
  clampValue: import('vue').ComputedRef<(value: number) => number>;
88
- axis: import('vue').ComputedRef<{
89
- position: "bottom";
90
- size: "height";
91
- cross: "width";
92
- } | {
93
- position: "left";
94
- size: "width";
95
- cross: "height";
96
- }>;
97
89
  roundToStep: import('vue').ComputedRef<(value: number) => number | undefined>;
98
- normalizeValues: import('vue').ComputedRef<(values: number[]) => number[]>;
99
90
  }>;
100
91
  }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
101
92
  export default _default;
package/dist/composables/slider/createSlider.d.ts CHANGED
@@ -4,7 +4,6 @@ export type SliderMark = {
4
4
  value: number;
5
5
  label?: string;
6
6
  } | number;
7
- export type SliderOrientation = "horizontal" | "vertical";
8
7
  export type CreateSliderOptions<TValue extends number | number[] = number> = {
9
8
  /**
10
9
  * Current value(s) of the slider.
@@ -62,12 +61,6 @@ export type CreateSliderOptions<TValue extends number | number[] = number> = {
62
61
  * @default undefined
63
62
  */
64
63
  label: MaybeRef<string>;
65
- /**
66
- * Orientation of the slider.
67
- *
68
- * @default "horizontal"
69
- */
70
- orientation?: MaybeRef<SliderOrientation>;
71
64
  /**
72
65
  * Callback when the value changes during interaction.
73
66
  * Note: This is called during interaction (dragging, key press, etc.).
@@ -93,7 +86,7 @@ export declare const _unstableCreateSlider: <TValue extends number | number[] =
93
86
  root: import('vue').ComputedRef<{
94
87
  ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement>;
95
88
  style: {
96
- touchAction: "pan-x" | "pan-y";
89
+ touchAction: "pan-y";
97
90
  };
98
91
  onMousedown: (event: MouseEvent) => void;
99
92
  onTouchstart: (event: TouchEvent) => void;
@@ -107,7 +100,7 @@ export declare const _unstableCreateSlider: <TValue extends number | number[] =
107
100
  }) => {
108
101
  "data-index": number;
109
102
  style: {
110
- [x: string]: string;
103
+ left: string;
111
104
  };
112
105
  }>;
113
106
  /**
@@ -126,7 +119,7 @@ export declare const _unstableCreateSlider: <TValue extends number | number[] =
126
119
  "aria-valuemin": number;
127
120
  "aria-valuemax": number;
128
121
  "aria-valuenow": number;
129
- "aria-orientation": SliderOrientation;
122
+ "aria-orientation": "horizontal";
130
123
  "data-index": number;
131
124
  tabIndex: number;
132
125
  step: string | number;
@@ -142,11 +135,12 @@ export declare const _unstableCreateSlider: <TValue extends number | number[] =
142
135
  mark: import('vue').ComputedRef<(data: {
143
136
  value: number;
144
137
  label?: string;
138
+ positionOffset?: string;
145
139
  }) => {
146
140
  "data-value": number;
147
141
  "aria-hidden": true;
148
142
  style: {
149
- [x: string]: string;
143
+ left: string;
150
144
  };
151
145
  }>;
152
146
  /**
@@ -157,7 +151,7 @@ export declare const _unstableCreateSlider: <TValue extends number | number[] =
157
151
  }) => {
158
152
  "data-value": number;
159
153
  style: {
160
- [x: string]: string;
154
+ left: string;
161
155
  };
162
156
  "aria-hidden": true;
163
157
  }>;
@@ -168,7 +162,8 @@ export declare const _unstableCreateSlider: <TValue extends number | number[] =
168
162
  role: string;
169
163
  "aria-hidden": true;
170
164
  style: {
171
- [x: string]: string;
165
+ left: string;
166
+ width: string;
172
167
  };
173
168
  }>;
174
169
  /**
@@ -189,11 +184,6 @@ export declare const _unstableCreateSlider: <TValue extends number | number[] =
189
184
  * `-1` if no thumb is active.
190
185
  */
191
186
  activeThumbIndex: Ref<number, number>;
192
- /**
193
- * Index of the thumb that is currently focused.
194
- * `-1` if no thumb is focused.
195
- */
196
- focusedThumbIndex: Ref<number, number>;
197
187
  /**
198
188
  * `true` if the slider is a range slider (with two or more thumbs).
199
189
  */
@@ -216,47 +206,19 @@ export declare const _unstableCreateSlider: <TValue extends number | number[] =
216
206
  value: number;
217
207
  label?: string;
218
208
  }[]>;
209
+ shiftStep: import('vue').ComputedRef<number>;
210
+ normalizedValues: import('vue').ComputedRef<number[]>;
219
211
  }, {
220
- /**
221
- * Converts a value from the slider's range to a percentage (0-100).
222
- * @param value - value to convert
223
- * @returns percentage representation of the value
224
- */
225
- valueToPercent: import('vue').ComputedRef<(value: number) => number>;
226
- /**
227
- * Checks if a given mark value is active (i.e., within the selected range).
228
- * Use case: when rendering marks, to determine if a mark is covered by the selected range.
229
- *
230
- * @param markValue - value of the mark to check
231
- * @returns `true` if the mark is active, `false` otherwise
232
- */
233
- isMarkActive: import('vue').ComputedRef<(markValue: number) => boolean>;
234
212
  /**
235
213
  * Clamps a value to the slider's range.
236
214
  * @param value - value to clamp
237
215
  * @returns clamped value
238
216
  */
239
217
  clampValue: import('vue').ComputedRef<(value: number) => number>;
240
- /**
241
- * Main axis properties based on orientation.
242
- */
243
- axis: import('vue').ComputedRef<{
244
- position: "bottom";
245
- size: "height";
246
- cross: "width";
247
- } | {
248
- position: "left";
249
- size: "width";
250
- cross: "height";
251
- }>;
252
218
  /**
253
219
  * Rounds a value to the nearest valid step.
254
220
  * @param value - value to round
255
221
  * @returns rounded value
256
222
  */
257
223
  roundToStep: import('vue').ComputedRef<(value: number) => number | undefined>;
258
- /**
259
- * Normalizes an array of values to ensure they are within min/max bounds,
260
- */
261
- normalizeValues: import('vue').ComputedRef<(values: number[]) => number[]>;
262
224
  }>;
package/dist/index.js CHANGED
@@ -941,19 +941,8 @@ const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
941
941
  ]);
942
942
  const INCREMENT_KEYS = /* @__PURE__ */ new Set([KEY.Right, KEY.Up, KEY.PageUp]);
943
943
  const DECREMENT_KEYS = /* @__PURE__ */ new Set([KEY.Left, KEY.Down, KEY.PageDown]);
944
- const TRACK_CALCULATION_STRATEGIES = {
945
- horizontal: (rect, coords) => MathUtils.clamp((coords.x - rect.left) / rect.width, 0, 1),
946
- vertical: (rect, coords) => MathUtils.clamp((rect.bottom - coords.y) / rect.height, 0, 1)
947
- };
948
944
  const readThumbIndex = (event) => Number(event.currentTarget?.dataset.index ?? -1);
949
945
  const roundToStep = (value, step, min) => Number((Math.round((value - min) / step) * step + min).toFixed(MathUtils.decimalsCount(step)));
950
- const normalizeValues = (values, min, max, step) => {
951
- if (!values.length) return [min];
952
- return values.map((value) => {
953
- const clamped = MathUtils.clamp(value, min, max);
954
- return roundToStep(clamped, step, min);
955
- }).sort((a, b) => a - b);
956
- };
957
946
  const findClosestIndex = (values, currentValue) => {
958
947
  const result = values.reduce((acc, value, index) => {
959
948
  const distance = Math.abs(currentValue - value);
@@ -965,7 +954,7 @@ const findClosestIndex = (values, currentValue) => {
965
954
  }
966
955
  return acc;
967
956
  }, null);
968
- return result.closestIndex;
957
+ return result?.closestIndex ?? -1;
969
958
  };
970
959
  const adjustValueByIndex = ({
971
960
  values,
@@ -980,32 +969,27 @@ const _unstableCreateSlider = createBuilder(
980
969
  const min = computed(() => unref(options.min) ?? 0);
981
970
  const max = computed(() => unref(options.max) ?? 100);
982
971
  const step = computed(() => unref(options.step) ?? 1);
983
- const values = computed(() => {
972
+ const normalizedValues = computed(() => {
984
973
  const rawValues = unref(options.value);
985
- if (Array.isArray(rawValues)) {
986
- if (!rawValues?.length) {
987
- return [min.value];
988
- }
989
- return normalizeValues(rawValues, min.value, max.value, step.value);
990
- } else {
991
- if (typeof rawValues !== "number") {
992
- return [min.value];
974
+ const arrayValues = Array.isArray(rawValues) ? rawValues.sort((a, b) => a - b) : [rawValues];
975
+ if (!arrayValues.length) return [min.value];
976
+ return arrayValues.map((value) => {
977
+ const clamped = MathUtils.clamp(value, min.value, max.value);
978
+ if (isDiscrete.value) {
979
+ return roundToStep(clamped, step.value, min.value);
993
980
  }
994
- return normalizeValues([rawValues], min.value, max.value, step.value);
995
- }
981
+ return clamped;
982
+ });
996
983
  });
997
984
  const shiftStep = computed(() => {
998
985
  const shiftStep2 = unref(options.shiftStep);
999
- if (typeof shiftStep2 !== "undefined") {
1000
- return shiftStep2;
1001
- }
986
+ if (shiftStep2 != void 0) return shiftStep2;
1002
987
  const stepMultiple = Math.max(1, Math.round((max.value - min.value) * 0.1 / step.value));
1003
988
  return stepMultiple * step.value;
1004
989
  });
1005
990
  const isDisabled = computed(() => unref(options.disabled) ?? false);
1006
991
  const marks = computed(() => unref(options.marks) ?? false);
1007
992
  const label = computed(() => unref(options.label));
1008
- const orientation = computed(() => unref(options.orientation) ?? "horizontal");
1009
993
  const isDiscrete = computed(() => unref(options.discrete) ?? false);
1010
994
  let touchId = null;
1011
995
  let movesSinceStart = 0;
@@ -1013,7 +997,6 @@ const _unstableCreateSlider = createBuilder(
1013
997
  let previousActiveIndex = null;
1014
998
  const isDragging = ref(false);
1015
999
  const activeThumbIndex = ref(-1);
1016
- const focusedThumbIndex = ref(-1);
1017
1000
  const isRange = computed(() => {
1018
1001
  const unrefValues = unref(options.value);
1019
1002
  return Array.isArray(unrefValues) && unrefValues.length > 1;
@@ -1030,12 +1013,9 @@ const _unstableCreateSlider = createBuilder(
1030
1013
  }
1031
1014
  return [];
1032
1015
  });
1033
- const axis = computed(
1034
- () => orientation.value === "vertical" ? { position: "bottom", size: "height", cross: "width" } : { position: "left", size: "width", cross: "height" }
1035
- );
1036
1016
  const marksValues = computed(() => marksList.value.map((mark) => mark.value));
1037
1017
  const emitChange = (next) => {
1038
- if (!areArraysEqual(values.value, next)) {
1018
+ if (!areArraysEqual(normalizedValues.value, next)) {
1039
1019
  const nextValue = isRange.value ? next : next[0];
1040
1020
  if (typeof nextValue !== "undefined") {
1041
1021
  options.onChange?.(nextValue);
@@ -1085,9 +1065,8 @@ const _unstableCreateSlider = createBuilder(
1085
1065
  const slider = sliderRef.value;
1086
1066
  if (!slider) return null;
1087
1067
  const rect = slider.getBoundingClientRect();
1088
- const mainSize = orientation.value === "vertical" ? rect.height : rect.width;
1089
- if (mainSize <= 0) return null;
1090
- const percent = TRACK_CALCULATION_STRATEGIES[orientation.value](rect, coords);
1068
+ if (rect.width <= 0) return null;
1069
+ const percent = MathUtils.clamp((coords.x - rect.left) / rect.width, 0, 1);
1091
1070
  const raw = MathUtils.percentToValue(percent, min.value, max.value);
1092
1071
  const snapped = !isDiscrete.value ? roundToStep(raw, step.value, min.value) : marksValues.value[findClosestIndex(marksValues.value, raw)];
1093
1072
  if (typeof snapped !== "number") return null;
@@ -1095,10 +1074,10 @@ const _unstableCreateSlider = createBuilder(
1095
1074
  if (!isRange.value) {
1096
1075
  return { newValue: candidate, activeIndex: 0 };
1097
1076
  }
1098
- const closestIndex = findClosestIndex(values.value, candidate);
1077
+ const closestIndex = findClosestIndex(normalizedValues.value, candidate);
1099
1078
  const index = isMoving && previousActiveIndex != null ? previousActiveIndex : closestIndex;
1100
1079
  const adjustedValues = adjustValueByIndex({
1101
- values: values.value,
1080
+ values: normalizedValues.value,
1102
1081
  newValue: candidate,
1103
1082
  index
1104
1083
  });
@@ -1108,7 +1087,7 @@ const _unstableCreateSlider = createBuilder(
1108
1087
  };
1109
1088
  const commitValueFromEvent = (event, input) => {
1110
1089
  const index = readThumbIndex(event);
1111
- const current = values.value[index];
1090
+ const current = normalizedValues.value[index];
1112
1091
  if (typeof current !== "number") {
1113
1092
  return;
1114
1093
  }
@@ -1131,13 +1110,12 @@ const _unstableCreateSlider = createBuilder(
1131
1110
  return neighbor?.value ?? current;
1132
1111
  };
1133
1112
  const scalar = MathUtils.clamp(useMarks ? snapByMarks(input) : input, min.value, max.value);
1134
- const nextValues = isRange.value ? adjustValueByIndex({ values: values.value, newValue: scalar, index }) : [scalar];
1113
+ const nextValues = isRange.value ? adjustValueByIndex({ values: normalizedValues.value, newValue: scalar, index }) : [scalar];
1135
1114
  if (isRange.value) {
1136
1115
  const activeIndex = nextValues.indexOf(scalar);
1137
1116
  ensureFocusOnThumb({ index: activeIndex, shouldSetActive: true });
1138
1117
  }
1139
- focusedThumbIndex.value = index;
1140
- if (!areArraysEqual(values.value, nextValues)) {
1118
+ if (!areArraysEqual(normalizedValues.value, nextValues)) {
1141
1119
  emitChange(nextValues);
1142
1120
  }
1143
1121
  emitCommit(nextValues);
@@ -1245,13 +1223,11 @@ const _unstableCreateSlider = createBuilder(
1245
1223
  const handleHiddenInputFocus = (event) => {
1246
1224
  const index = readThumbIndex(event);
1247
1225
  if (isFocusVisible(event.target)) {
1248
- focusedThumbIndex.value = index;
1249
1226
  activeThumbIndex.value = index;
1250
1227
  }
1251
1228
  };
1252
1229
  const handleHiddenInputBlur = (event) => {
1253
1230
  if (!isFocusVisible(event.target)) {
1254
- focusedThumbIndex.value = -1;
1255
1231
  activeThumbIndex.value = -1;
1256
1232
  }
1257
1233
  };
@@ -1259,7 +1235,7 @@ const _unstableCreateSlider = createBuilder(
1259
1235
  if (!NAVIGATION_KEYS.has(event.key)) return;
1260
1236
  event.preventDefault();
1261
1237
  const index = readThumbIndex(event);
1262
- const value = values.value[index];
1238
+ const value = normalizedValues.value[index];
1263
1239
  if (typeof value !== "number") {
1264
1240
  return;
1265
1241
  }
@@ -1279,24 +1255,24 @@ const _unstableCreateSlider = createBuilder(
1279
1255
  }
1280
1256
  return;
1281
1257
  } else {
1282
- const values2 = marksValues.value;
1283
- const lastIndex = values2.length - 1;
1284
- const currentIndex = values2.indexOf(value);
1285
- const first = values2[0];
1286
- const last = values2[lastIndex];
1258
+ const values = marksValues.value;
1259
+ const lastIndex = values.length - 1;
1260
+ const currentIndex = values.indexOf(value);
1261
+ const first = values[0];
1262
+ const last = values[lastIndex];
1287
1263
  if (event.key === "Home" && typeof first === "number")
1288
1264
  return commitValueFromEvent(event, first);
1289
1265
  if (event.key === "End" && typeof last === "number")
1290
1266
  return commitValueFromEvent(event, last);
1291
1267
  if (INCREMENT_KEYS.has(event.key)) {
1292
1268
  const nextIdx = currentIndex < 0 ? 0 : Math.min(lastIndex, currentIndex + 1);
1293
- const next = values2[nextIdx];
1269
+ const next = values[nextIdx];
1294
1270
  if (next !== value && typeof next === "number") commitValueFromEvent(event, next);
1295
1271
  return;
1296
1272
  }
1297
1273
  if (DECREMENT_KEYS.has(event.key)) {
1298
1274
  const nextIdx = currentIndex < 0 ? 0 : Math.max(0, currentIndex - 1);
1299
- const next = values2[nextIdx];
1275
+ const next = values[nextIdx];
1300
1276
  if (next !== value && typeof next === "number") commitValueFromEvent(event, next);
1301
1277
  return;
1302
1278
  }
@@ -1304,27 +1280,18 @@ const _unstableCreateSlider = createBuilder(
1304
1280
  };
1305
1281
  const trackOffset = computed(
1306
1282
  () => MathUtils.valueToPercent(
1307
- isRange.value && values.value[0] ? values.value[0] : min.value,
1283
+ isRange.value && normalizedValues.value[0] ? normalizedValues.value[0] : min.value,
1308
1284
  min.value,
1309
1285
  max.value
1310
1286
  )
1311
1287
  );
1312
1288
  const trackLength = computed(
1313
- () => MathUtils.valueToPercent(values.value.at(-1) ?? 0, min.value, max.value) - trackOffset.value
1289
+ () => MathUtils.valueToPercent(normalizedValues.value.at(-1) ?? 0, min.value, max.value) - trackOffset.value
1314
1290
  );
1315
1291
  const trackStyle = computed(() => ({
1316
- [axis.value.position]: `${trackOffset.value}%`,
1317
- [axis.value.size]: `${trackLength.value}%`
1292
+ left: `${trackOffset.value}%`,
1293
+ width: `${trackLength.value}%`
1318
1294
  }));
1319
- const isMarkActive = computed(() => (markValue) => {
1320
- if (isRange.value) {
1321
- const minValue = Math.min(...values.value);
1322
- const maxValue = Math.max(...values.value);
1323
- return markValue >= minValue && markValue <= maxValue;
1324
- }
1325
- const currentValue = values.value[0];
1326
- return markValue <= currentValue;
1327
- });
1328
1295
  onBeforeUnmount(stopPointerListening);
1329
1296
  watch(
1330
1297
  () => isDisabled.value,
@@ -1332,11 +1299,15 @@ const _unstableCreateSlider = createBuilder(
1332
1299
  if (isDisabled.value) {
1333
1300
  isDragging.value = false;
1334
1301
  activeThumbIndex.value = -1;
1335
- focusedThumbIndex.value = -1;
1336
1302
  stopPointerListening();
1337
1303
  }
1338
1304
  }
1339
1305
  );
1306
+ const adjustMarkPosition = (percentage, offset) => {
1307
+ if (offset && percentage <= 0) return offset;
1308
+ if (offset && percentage >= 100) return `calc(100% - ${offset})`;
1309
+ return `${percentage}%`;
1310
+ };
1340
1311
  return {
1341
1312
  elements: {
1342
1313
  /**
@@ -1344,7 +1315,7 @@ const _unstableCreateSlider = createBuilder(
1344
1315
  */
1345
1316
  root: computed(() => ({
1346
1317
  ref: sliderRef,
1347
- style: { touchAction: orientation.value === "vertical" ? "pan-x" : "pan-y" },
1318
+ style: { touchAction: "pan-y" },
1348
1319
  onMousedown: handleRootMousedown,
1349
1320
  onTouchstart: handlePointerStart
1350
1321
  })),
@@ -1354,7 +1325,7 @@ const _unstableCreateSlider = createBuilder(
1354
1325
  thumbContainer: computed(() => (data) => ({
1355
1326
  "data-index": data.index,
1356
1327
  style: {
1357
- [axis.value.position]: `${MathUtils.valueToPercent(data.value, min.value, max.value)}%`
1328
+ left: `${MathUtils.valueToPercent(data.value, min.value, max.value)}%`
1358
1329
  }
1359
1330
  })),
1360
1331
  /**
@@ -1370,7 +1341,7 @@ const _unstableCreateSlider = createBuilder(
1370
1341
  "aria-valuemin": min.value,
1371
1342
  "aria-valuemax": max.value,
1372
1343
  "aria-valuenow": data.value,
1373
- "aria-orientation": orientation.value,
1344
+ "aria-orientation": "horizontal",
1374
1345
  "data-index": data.index,
1375
1346
  tabIndex: isDisabled.value ? -1 : 0,
1376
1347
  step: isDiscrete.value && marks.value ? "any" : step.value ?? void 0,
@@ -1383,20 +1354,26 @@ const _unstableCreateSlider = createBuilder(
1383
1354
  /**
1384
1355
  * Mark elements
1385
1356
  */
1386
- mark: computed(() => (data) => ({
1387
- "data-value": data.value,
1388
- "aria-hidden": true,
1389
- style: {
1390
- [axis.value.position]: `${MathUtils.clamp(MathUtils.valueToPercent(data.value, min.value, max.value), 0, 100)}%`
1391
- }
1392
- })),
1357
+ mark: computed(() => (data) => {
1358
+ const percentage = MathUtils.clamp(
1359
+ MathUtils.valueToPercent(data.value, min.value, max.value),
1360
+ 0,
1361
+ 100
1362
+ );
1363
+ const position = adjustMarkPosition(percentage, data.positionOffset);
1364
+ return {
1365
+ "data-value": data.value,
1366
+ "aria-hidden": true,
1367
+ style: { left: position }
1368
+ };
1369
+ }),
1393
1370
  /**
1394
1371
  * Label for each mark
1395
1372
  */
1396
1373
  markLabel: computed(() => (data) => ({
1397
1374
  "data-value": data.value,
1398
1375
  style: {
1399
- [axis.value.position]: `${MathUtils.valueToPercent(data.value, min.value, max.value)}%`
1376
+ left: `${MathUtils.valueToPercent(data.value, min.value, max.value)}%`
1400
1377
  },
1401
1378
  "aria-hidden": true
1402
1379
  })),
@@ -1427,11 +1404,6 @@ const _unstableCreateSlider = createBuilder(
1427
1404
  * `-1` if no thumb is active.
1428
1405
  */
1429
1406
  activeThumbIndex,
1430
- /**
1431
- * Index of the thumb that is currently focused.
1432
- * `-1` if no thumb is focused.
1433
- */
1434
- focusedThumbIndex,
1435
1407
  /**
1436
1408
  * `true` if the slider is a range slider (with two or more thumbs).
1437
1409
  */
@@ -1450,35 +1422,17 @@ const _unstableCreateSlider = createBuilder(
1450
1422
  * - If marks option is an array of numbers or objects, it is used as provided (filtered to be within range).
1451
1423
  * - If marks option is `false`, no marks are shown.
1452
1424
  */
1453
- marksList
1425
+ marksList,
1426
+ shiftStep,
1427
+ normalizedValues
1454
1428
  },
1455
1429
  internals: {
1456
- /**
1457
- * Converts a value from the slider's range to a percentage (0-100).
1458
- * @param value - value to convert
1459
- * @returns percentage representation of the value
1460
- */
1461
- valueToPercent: computed(
1462
- () => (value) => MathUtils.valueToPercent(value, min.value, max.value)
1463
- ),
1464
- /**
1465
- * Checks if a given mark value is active (i.e., within the selected range).
1466
- * Use case: when rendering marks, to determine if a mark is covered by the selected range.
1467
- *
1468
- * @param markValue - value of the mark to check
1469
- * @returns `true` if the mark is active, `false` otherwise
1470
- */
1471
- isMarkActive,
1472
1430
  /**
1473
1431
  * Clamps a value to the slider's range.
1474
1432
  * @param value - value to clamp
1475
1433
  * @returns clamped value
1476
1434
  */
1477
1435
  clampValue: computed(() => (value) => MathUtils.clamp(value, min.value, max.value)),
1478
- /**
1479
- * Main axis properties based on orientation.
1480
- */
1481
- axis,
1482
1436
  /**
1483
1437
  * Rounds a value to the nearest valid step.
1484
1438
  * @param value - value to round
@@ -1486,12 +1440,6 @@ const _unstableCreateSlider = createBuilder(
1486
1440
  */
1487
1441
  roundToStep: computed(
1488
1442
  () => (value) => !isDiscrete.value ? roundToStep(value, step.value, min.value) : marksValues.value[findClosestIndex(marksValues.value, value)]
1489
- ),
1490
- /**
1491
- * Normalizes an array of values to ensure they are within min/max bounds,
1492
- */
1493
- normalizeValues: computed(
1494
- () => (values2) => normalizeValues(values2, min.value, max.value, step.value)
1495
1443
  )
1496
1444
  }
1497
1445
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sit-onyx/headless",
3
3
  "description": "Headless composables for Vue",
4
- "version": "0.3.0-dev-20251028142054",
4
+ "version": "0.3.0-dev-20251029130423",
5
5
  "type": "module",
6
6
  "author": "Schwarz IT KG",
7
7
  "license": "Apache-2.0",