@sit-onyx/headless 0.7.1 → 0.8.0-dev-20260323184401

package/dist/composables/slider/createSlider.d.ts

@@ -1,8 +1,4 @@
 import { HTMLAttributes, MaybeRef, Ref } from 'vue';
-export type SliderMark = {
-    value: number;
-    label?: string;
-};
 type SliderValue = number | [number, number];
 export type NormalizedSliderValue = [number] | [number, number];
 export type CreateSliderOptions<TValue extends SliderValue = SliderValue> = {
@@ -40,14 +36,6 @@ export type CreateSliderOptions<TValue extends SliderValue = SliderValue> = {
      * @default false
      */
     disabled?: MaybeRef<boolean>;
-    /**
-     * Whether to show marks inside the slider rail.
-     * - `true`: will generate marks automatically based on `step` prop
-     * - array of numbers or `SliderMark` objects: will shown at the specified values with optional labels
-     *
-     * @default false
-     */
-    marks?: MaybeRef<SliderMark[] | number[] | boolean>;
     /**
      * Aria label for the slider.
      */
@@ -255,17 +243,6 @@ export declare const createSlider: <TValue extends SliderValue>(options: CreateS
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
         ref: import('vue').WritableComputedRef<HTMLElement | null, HTMLElement | null>;
     }>;
-    /**
-     * Individual thumb elements for each value (span)
-     */
-    thumbContainer: import('vue').ComputedRef<(data: {
-        index: number;
-        value: number;
-    }) => {
-        style: {
-            left: string;
-        };
-    }>;
     /**
      * Input inside each thumb for accessibility
      */
@@ -468,46 +445,20 @@ export declare const createSlider: <TValue extends SliderValue>(options: CreateS
         disabled: boolean | undefined;
         ref: import('vue').WritableComputedRef<HTMLElement | null, HTMLElement | null> | undefined;
     }>;
-    /**
-     * Single Mark element inside the rail
-     */
-    mark: import('vue').ComputedRef<(data: {
-        value: number;
-        label?: string;
-        padding: string;
-        markWidth: string;
-    }) => {
-        "aria-hidden": true;
-        style: {
-            left: string;
-        };
-    }>;
-    /**
-     * Label for each mark
-     */
-    markLabel: import('vue').ComputedRef<(data: {
-        value: number;
-    }) => {
-        "aria-hidden": true;
-        style: {
-            left: string;
-            transform: "translateX(-50%)";
-        };
-    }>;
+}, {
+    normalizedValue: import('vue').ComputedRef<NormalizedSliderValue>;
+    shiftStep: import('vue').ComputedRef<number>;
     /**
      * Track element representing the selected range
      */
     track: import('vue').ComputedRef<{
-        style: {
-            left: string;
-            width: string;
-        };
+        start: number;
+        startPercentage: number;
+        end: number;
+        endPercentage: number;
     }>;
 }, {
-    normalizedValue: import('vue').ComputedRef<NormalizedSliderValue>;
-    shiftStep: import('vue').ComputedRef<number>;
-    marks: import('vue').ComputedRef<SliderMark[]>;
-}, {
+    getValueInPercentage: import('vue').ComputedRef<(value: number) => number>;
     updateValue: (value: number, index: number) => void;
     updateValueByStep: (direction: "increase" | "decrease") => void;
 }>;

package/dist/index.js

@@ -1245,20 +1245,6 @@ const createSlider = createBuilder(
       const stepMultiple = Math.max(1, Math.round((max.value - min.value) * 0.1 / step.value));
       return stepMultiple * step.value;
     });
-    const marks = computed(() => {
-      const _marks = toValue(options.marks);
-      if (!_marks) return [];
-      if (_marks === true) {
-        const markCount = Math.floor((max.value - min.value) / step.value) + 1;
-        return Array.from({ length: markCount }, (_, index) => {
-          return { value: min.value + step.value * index };
-        });
-      }
-      return _marks.map((mark) => {
-        if (typeof mark === "number") return { value: mark };
-        return mark;
-      }).sort((a, b) => a.value - b.value);
-    });
     const getNormalizedValue = computed(() => {
       return (value) => {
         let values = typeof value === "number" ? [value] : value;
@@ -1379,12 +1365,6 @@ const createSlider = createBuilder(
             ...toValue(options.disabled) ? void 0 : events
           };
         }),
-        /**
-         * Individual thumb elements for each value (span)
-         */
-        thumbContainer: computed(() => (data) => ({
-          style: { left: `${getValueInPercentage.value(data.value)}%` }
-        })),
         /**
          * Input inside each thumb for accessibility
          */
@@ -1408,58 +1388,30 @@ const createSlider = createBuilder(
             ref: data.index === 0 ? firstThumbRef : data.index === 1 ? secondThumbRef : void 0,
             ...toValue(options.disabled) ? void 0 : events
           };
-        }),
-        /**
-         * Single Mark element inside the rail
-         */
-        mark: computed(
-          () => (data) => {
-            const percentage = getValueInPercentage.value(data.value);
-            return {
-              "aria-hidden": true,
-              style: {
-                // adjusting the position for the marks with consideration to their width and a padding/safe-zone.
-                left: `calc(${data.padding} + (100% - 2 * ${data.padding} - ${data.markWidth}) * ${percentage} / 100)`
-              }
-            };
-          }
-        ),
-        /**
-         * Label for each mark
-         */
-        markLabel: computed(() => (data) => {
-          const left = getValueInPercentage.value(data.value);
-          return {
-            "aria-hidden": true,
-            style: {
-              left: `${left}%`,
-              transform: "translateX(-50%)"
-            }
-          };
-        }),
+        })
+      },
+      state: {
+        normalizedValue,
+        shiftStep,
         /**
          * Track element representing the selected range
          */
         track: computed(() => {
           const isRange = normalizedValue.value.length > 1;
-          const offsetValue = isRange ? normalizedValue.value[0] : min.value;
-          const left = getValueInPercentage.value(offsetValue);
-          const lengthValue = normalizedValue.value.at(-1);
-          const width = getValueInPercentage.value(lengthValue) - left;
+          const start = isRange ? normalizedValue.value[0] : min.value;
+          const startPercentage = getValueInPercentage.value(start);
+          const end = normalizedValue.value.at(-1);
+          const endPercentage = getValueInPercentage.value(end);
           return {
-            style: {
-              left: `${left}%`,
-              width: `${width}%`
-            }
+            start,
+            startPercentage,
+            end,
+            endPercentage
           };
         })
       },
-      state: {
-        normalizedValue,
-        shiftStep,
-        marks
-      },
       internals: {
+        getValueInPercentage,
         updateValue,
         updateValueByStep
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "0.7.1",
+  "version": "0.8.0-dev-20260323184401",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",