@agnos-ui/core 0.9.0 → 0.9.1

package/components/slider/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const slider = require("../../slider-xEieAbBb.cjs");
+const slider = require("../../slider-DSx5CAce.cjs");
 exports.createSlider = slider.createSlider;
 exports.getSliderDefaultConfig = slider.getSliderDefaultConfig;

package/components/slider/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../slider-DVthNbSG.js";
+import { c, g } from "../../slider-BmxQ3A_u.js";
 export {
   c as createSlider,
   g as getSliderDefaultConfig

package/components/slider/slider-utils.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Manages minimum and maximum range constraints for values in an array by adjusting adjacent values.
+ *
+ * This function ensures that the value at the specified index maintains proper minimum and maximum
+ * distance constraints with its neighboring values. It pushes adjacent handles when necessary to
+ * maintain the required range constraints.
+ *
+ * @param values - Array of numeric values to be managed (typically slider handle positions)
+ * @param index - Index of the value in the array that serves as the reference point
+ * @param minRange - Minimum allowed distance between adjacent values
+ * @param maxRange - Maximum allowed distance between adjacent values
+ * @param min - Minimum boundary of the slider
+ * @param max - Maximum boundary of the slider
+ * @param pushRange - Whether to enable pushing of adjacent values to maintain range constraints
+ *
+ * @returns The modified values array with range constraints applied
+ *
+ * @example
+ * ```typescript
+ * const values = [10, 20, 30, 40];
+ * const result = manageMinMaxRange(values, 1, 5, 15, 0, 50, true);
+ * // Result ensures value at index 1 maintains 5-15 unit distance from neighbors
+ * ```
+ */
+export declare const manageMinMaxRange: (values: number[], index: number, minRange: number, maxRange: number, min: number, max: number, pushRange: boolean) => number[];

package/components/slider/slider.d.ts

@@ -276,6 +276,27 @@ export interface SliderProps extends SliderCommonPropsAndState {
      * @defaultValue `true`
      */
     showTickValues: boolean;
+    /**
+     * Minimum distance between two values.
+     * When set to 0, no minimum distance constraint is applied.
+     *
+     * @defaultValue 0
+     */
+    minRange: number;
+    /**
+     * Maximum distance between two values
+     * When set to 0, no maximum distance constraint is applied.
+     *
+     * @defaultValue 0
+     */
+    maxRange: number;
+    /**
+     * When true, if moving a value would break the minRange or maxRange constraint,
+     * it will instead push or pull the neighboring values to keep the allowed range rather than just stopping.
+     *
+     * @defaultValue false
+     */
+    pushRange: boolean;
 }
 /**
  * Interface representing various directives used in the slider component.
@@ -285,6 +306,10 @@ export interface SliderDirectives {
      * Directive to get the slider component elementRef
      */
     sliderDirective: Directive;
+    /**
+     * Directive to apply to the slider container wrapping the slider content
+     */
+    containerDirective: Directive;
     /**
      * Directive used to style the progress display for each handle
      */

package/index.cjs

@@ -8,7 +8,7 @@ const pagination = require("./pagination-C1TT-oea.cjs");
 const progressbar = require("./progressbar-CRvhNB5R.cjs");
 const rating = require("./rating-DAb6nR67.cjs");
 const select = require("./select-C0rJJQfl.cjs");
-const slider = require("./slider-xEieAbBb.cjs");
+const slider = require("./slider-DSx5CAce.cjs");
 const toaster = require("./toaster-Cayg6Lbq.cjs");
 const tree = require("./tree-Pvr2rZ-D.cjs");
 const config = require("./config.cjs");

package/index.js

@@ -6,7 +6,7 @@ import { c as c4, g as g4 } from "./pagination-B97wBLok.js";
 import { c as c5, g as g5 } from "./progressbar-BWBlRk_Y.js";
 import { c as c6, g as g6 } from "./rating-BXvy9kXq.js";
 import { c as c7, g as g7 } from "./select-BdjpnE7_.js";
-import { c as c8, g as g8 } from "./slider-DVthNbSG.js";
+import { c as c8, g as g8 } from "./slider-BmxQ3A_u.js";
 import { T, c as c9, d, g as g9 } from "./toaster-XfzHDqz_.js";
 import { c as c10, g as g10 } from "./tree-BFrXdJox.js";
 import { createWidgetsConfig, mergeInto } from "./config.js";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/core",
 	"description": "Framework-agnostic headless component library.",
-	"version": "0.9.0",
+	"version": "0.9.1",
 	"type": "module",
 	"main": "./index.cjs",
 	"module": "./index.js",

package/{slider-DVthNbSG.js → slider-BmxQ3A_u.js}

@@ -2,7 +2,7 @@ import { computed, writable, readable } from "@amadeus-it-group/tansu";
 import { j as createBrowserStoreDirective, g as createBrowserStoreArrayDirective, k as mergeDirectives, n as createAttributesDirective, b as browserDirective } from "./dom-gfxqXJpK.js";
 import { noop } from "./utils/func.js";
 import { writablesForProps, bindableProp, stateStores, true$ } from "./utils/stores.js";
-import { i as typeArray, e as typeString, c as typeBoolean, b as typeNumberInRangeFactory, g as typeFunction, a as typeNumber } from "./writables-CgpOQ4hA.js";
+import { i as typeArray, c as typeBoolean, b as typeNumberInRangeFactory, e as typeString, g as typeFunction, a as typeNumber } from "./writables-CgpOQ4hA.js";
 import { createResizeObserver } from "./services/resizeObserver.js";
 import { createWidgetFactory } from "./utils/widget.js";
 const decimalRegExp = /(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/;
@@ -16,6 +16,59 @@ function getDecimalPrecision(number) {
     (+matches[2] || 0)
   );
 }
+const pushHandle = (values, index, currentValue, direction, minRange, min, max, pushRange) => {
+  let nextValue = values[index + direction];
+  if (nextValue == null || Math.abs(nextValue - currentValue) >= minRange) {
+    return currentValue;
+  }
+  if (pushRange) {
+    const targetValue = currentValue + minRange * direction;
+    nextValue = pushHandle(values, index + direction, targetValue, direction, minRange, min, max, pushRange);
+    nextValue = Math.max(Math.min(nextValue, max), min);
+    values[index + direction] = nextValue;
+  }
+  if (Math.abs(nextValue - currentValue) < minRange) {
+    currentValue = nextValue - minRange * direction;
+    values[index] = currentValue;
+  }
+  return currentValue;
+};
+const pullHandle = (values, index, currentValue, direction, maxRange, min, max, pushRange) => {
+  let nextValue = values[index + direction];
+  if (nextValue == null || Math.abs(nextValue - currentValue) <= maxRange) {
+    return currentValue;
+  }
+  if (pushRange) {
+    const targetValue = currentValue + maxRange * direction;
+    nextValue = pullHandle(values, index + direction, targetValue, direction, maxRange, min, max, pushRange);
+    nextValue = Math.max(Math.min(nextValue, max), min);
+    values[index + direction] = nextValue;
+  }
+  if (Math.abs(nextValue - currentValue) > maxRange) {
+    currentValue = nextValue - maxRange * direction;
+    values[index] = currentValue;
+  }
+  return currentValue;
+};
+const manageMinMaxRange = (values, index, minRange, maxRange, min, max, pushRange) => {
+  let current = values[index];
+  const previous = values[index - 1];
+  const next = values[index + 1];
+  if (previous != null && current < previous) {
+    current = values[index] = previous;
+  } else if (next != null && current > next) {
+    current = values[index] = next;
+  }
+  if (minRange) {
+    current = pushHandle(values, index, current, 1, minRange, min, max, pushRange);
+    current = pushHandle(values, index, current, -1, minRange, min, max, pushRange);
+  }
+  if (maxRange) {
+    current = pullHandle(values, index, current, 1, maxRange, min, max, pushRange);
+    pullHandle(values, index, current, -1, maxRange, min, max, pushRange);
+  }
+  return values;
+};
 const defaultSliderConfig = {
   min: 0,
   max: 100,
@@ -34,6 +87,9 @@ const defaultSliderConfig = {
   showTicks: false,
   showTickValues: true,
   tickInterval: 0,
+  minRange: 0,
+  maxRange: 0,
+  pushRange: false,
   rtl: false
 };
 function getSliderDefaultConfig() {
@@ -57,7 +113,10 @@ const configValidator = {
   showTickValues: typeBoolean,
   tickInterval: typeNumberInRangeFactory(0, Infinity, { strict: true }),
   rtl: typeBoolean,
-  className: typeString
+  className: typeString,
+  minRange: typeNumberInRangeFactory(0, Infinity),
+  maxRange: typeNumberInRangeFactory(0, Infinity),
+  pushRange: typeBoolean
 };
 const computeCleanValue = (value, min, max, intStepSize, decimalPrecision) => {
   const magnitude = Math.pow(10, decimalPrecision);
@@ -97,6 +156,9 @@ const createSlider = createWidgetFactory("slider", (config) => {
       // dirty inputs that need adjustment:
       min$: _dirtyMinimum$,
       max$: _dirtyMaximum$,
+      minRange$: _dirtyMinimumRange$,
+      maxRange$: _dirtyMaximumRange$,
+      pushRange$,
       stepSize$,
       rtl$,
       values$: _dirtyValues$,
@@ -130,8 +192,25 @@ const createSlider = createWidgetFactory("slider", (config) => {
     }
     return Math.max(_dirtyMinimum, _dirtyMaximum);
   });
+  const minRange$ = computed(() => {
+    const _dirtyMinimumRange = _dirtyMinimumRange$();
+    if (_dirtyMinimumRange <= 0) {
+      return 0;
+    }
+    const _dirtyMaximumRange = _dirtyMaximumRange$();
+    return _dirtyMaximumRange === 0 ? _dirtyMinimumRange : Math.min(_dirtyMinimumRange, _dirtyMaximumRange);
+  });
+  const maxRange$ = computed(() => {
+    const _dirtyMaximumRange = _dirtyMaximumRange$();
+    if (_dirtyMaximumRange <= 0) {
+      return 0;
+    }
+    const _dirtyMinimumRange = _dirtyMinimumRange$();
+    return _dirtyMinimumRange === 0 ? _dirtyMaximumRange : Math.max(_dirtyMinimumRange, _dirtyMaximumRange);
+  });
   const _decimalPrecision$ = computed(() => Math.max(getDecimalPrecision(stepSize$()), getDecimalPrecision(min$()), getDecimalPrecision(max$())));
   const _intStepSize$ = computed(() => stepSize$() * Math.pow(10, _decimalPrecision$()));
+  let previousValues = _dirtyValues$();
   const values$ = bindableProp(
     _dirtyValues$,
     onValuesChange$,
@@ -140,7 +219,20 @@ const createSlider = createWidgetFactory("slider", (config) => {
       const max = max$();
       const intStepSize = _intStepSize$();
       const decimalPrecision = _decimalPrecision$();
-      return dirtyValues.map((dv) => computeCleanValue(dv, min, max, intStepSize, decimalPrecision));
+      const newValues = dirtyValues.map((dv) => computeCleanValue(dv, min, max, intStepSize, decimalPrecision));
+      if (dirtyValues.length > 1) {
+        const minRange = minRange$();
+        const maxRange = maxRange$();
+        if (minRange || maxRange) {
+          const pushRange = pushRange$();
+          const changedIndex = newValues.findIndex((dv, index) => dv !== previousValues[index]);
+          if (changedIndex !== -1) {
+            manageMinMaxRange(newValues, changedIndex, minRange, maxRange, min, max, pushRange);
+          }
+        }
+      }
+      previousValues = newValues;
+      return newValues;
     },
     typeArray.equal
   );
@@ -408,14 +500,25 @@ const createSlider = createWidgetFactory("slider", (config) => {
   };
   const horizontal$ = computed(() => !vertical$());
   const containerDirective = createAttributesDirective(() => ({
+    classNames: {
+      "au-slider": true$,
+      "au-slider-vertical": vertical$,
+      "au-slider-horizontal": horizontal$
+    },
+    attributes: {
+      class: stateProps.className$
+    }
+  }));
+  const contentDirective = createAttributesDirective(() => ({
     attributes: {
       "aria-disabled": computed(() => disabled$() ? "true" : void 0),
       class: stateProps.className$
     },
     classNames: {
-      "au-slider": true$,
+      "au-slider-content": true$,
       "au-slider-vertical": vertical$,
       "au-slider-horizontal": horizontal$,
+      "au-slider-with-labels": computed(() => showValueLabels$() || showMinMaxLabels$() || showTickValues$() && showTicks$()),
       disabled: disabled$
     }
   }));
@@ -597,7 +700,8 @@ const createSlider = createWidgetFactory("slider", (config) => {
     patch,
     api: {},
     directives: {
-      sliderDirective: mergeDirectives(sliderDirective, resizeDirective, containerDirective),
+      sliderDirective: mergeDirectives(sliderDirective, resizeDirective, contentDirective),
+      containerDirective,
       progressDisplayDirective: createAttributesDirective((progressContext$) => ({
         styles: {
           left: computed(() => percent(progressContext$().option.left)),

package/{slider-xEieAbBb.cjs → slider-DSx5CAce.cjs}

@@ -17,6 +17,59 @@ function getDecimalPrecision(number) {
     (+matches[2] || 0)
   );
 }
+const pushHandle = (values, index, currentValue, direction, minRange, min, max, pushRange) => {
+  let nextValue = values[index + direction];
+  if (nextValue == null || Math.abs(nextValue - currentValue) >= minRange) {
+    return currentValue;
+  }
+  if (pushRange) {
+    const targetValue = currentValue + minRange * direction;
+    nextValue = pushHandle(values, index + direction, targetValue, direction, minRange, min, max, pushRange);
+    nextValue = Math.max(Math.min(nextValue, max), min);
+    values[index + direction] = nextValue;
+  }
+  if (Math.abs(nextValue - currentValue) < minRange) {
+    currentValue = nextValue - minRange * direction;
+    values[index] = currentValue;
+  }
+  return currentValue;
+};
+const pullHandle = (values, index, currentValue, direction, maxRange, min, max, pushRange) => {
+  let nextValue = values[index + direction];
+  if (nextValue == null || Math.abs(nextValue - currentValue) <= maxRange) {
+    return currentValue;
+  }
+  if (pushRange) {
+    const targetValue = currentValue + maxRange * direction;
+    nextValue = pullHandle(values, index + direction, targetValue, direction, maxRange, min, max, pushRange);
+    nextValue = Math.max(Math.min(nextValue, max), min);
+    values[index + direction] = nextValue;
+  }
+  if (Math.abs(nextValue - currentValue) > maxRange) {
+    currentValue = nextValue - maxRange * direction;
+    values[index] = currentValue;
+  }
+  return currentValue;
+};
+const manageMinMaxRange = (values, index, minRange, maxRange, min, max, pushRange) => {
+  let current = values[index];
+  const previous = values[index - 1];
+  const next = values[index + 1];
+  if (previous != null && current < previous) {
+    current = values[index] = previous;
+  } else if (next != null && current > next) {
+    current = values[index] = next;
+  }
+  if (minRange) {
+    current = pushHandle(values, index, current, 1, minRange, min, max, pushRange);
+    current = pushHandle(values, index, current, -1, minRange, min, max, pushRange);
+  }
+  if (maxRange) {
+    current = pullHandle(values, index, current, 1, maxRange, min, max, pushRange);
+    pullHandle(values, index, current, -1, maxRange, min, max, pushRange);
+  }
+  return values;
+};
 const defaultSliderConfig = {
   min: 0,
   max: 100,
@@ -35,6 +88,9 @@ const defaultSliderConfig = {
   showTicks: false,
   showTickValues: true,
   tickInterval: 0,
+  minRange: 0,
+  maxRange: 0,
+  pushRange: false,
   rtl: false
 };
 function getSliderDefaultConfig() {
@@ -58,7 +114,10 @@ const configValidator = {
   showTickValues: utils_writables.typeBoolean,
   tickInterval: utils_writables.typeNumberInRangeFactory(0, Infinity, { strict: true }),
   rtl: utils_writables.typeBoolean,
-  className: utils_writables.typeString
+  className: utils_writables.typeString,
+  minRange: utils_writables.typeNumberInRangeFactory(0, Infinity),
+  maxRange: utils_writables.typeNumberInRangeFactory(0, Infinity),
+  pushRange: utils_writables.typeBoolean
 };
 const computeCleanValue = (value, min, max, intStepSize, decimalPrecision) => {
   const magnitude = Math.pow(10, decimalPrecision);
@@ -98,6 +157,9 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
       // dirty inputs that need adjustment:
       min$: _dirtyMinimum$,
       max$: _dirtyMaximum$,
+      minRange$: _dirtyMinimumRange$,
+      maxRange$: _dirtyMaximumRange$,
+      pushRange$,
       stepSize$,
       rtl$,
       values$: _dirtyValues$,
@@ -131,8 +193,25 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
     }
     return Math.max(_dirtyMinimum, _dirtyMaximum);
   });
+  const minRange$ = tansu.computed(() => {
+    const _dirtyMinimumRange = _dirtyMinimumRange$();
+    if (_dirtyMinimumRange <= 0) {
+      return 0;
+    }
+    const _dirtyMaximumRange = _dirtyMaximumRange$();
+    return _dirtyMaximumRange === 0 ? _dirtyMinimumRange : Math.min(_dirtyMinimumRange, _dirtyMaximumRange);
+  });
+  const maxRange$ = tansu.computed(() => {
+    const _dirtyMaximumRange = _dirtyMaximumRange$();
+    if (_dirtyMaximumRange <= 0) {
+      return 0;
+    }
+    const _dirtyMinimumRange = _dirtyMinimumRange$();
+    return _dirtyMinimumRange === 0 ? _dirtyMaximumRange : Math.max(_dirtyMinimumRange, _dirtyMaximumRange);
+  });
   const _decimalPrecision$ = tansu.computed(() => Math.max(getDecimalPrecision(stepSize$()), getDecimalPrecision(min$()), getDecimalPrecision(max$())));
   const _intStepSize$ = tansu.computed(() => stepSize$() * Math.pow(10, _decimalPrecision$()));
+  let previousValues = _dirtyValues$();
   const values$ = utils_stores.bindableProp(
     _dirtyValues$,
     onValuesChange$,
@@ -141,7 +220,20 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
       const max = max$();
       const intStepSize = _intStepSize$();
       const decimalPrecision = _decimalPrecision$();
-      return dirtyValues.map((dv) => computeCleanValue(dv, min, max, intStepSize, decimalPrecision));
+      const newValues = dirtyValues.map((dv) => computeCleanValue(dv, min, max, intStepSize, decimalPrecision));
+      if (dirtyValues.length > 1) {
+        const minRange = minRange$();
+        const maxRange = maxRange$();
+        if (minRange || maxRange) {
+          const pushRange = pushRange$();
+          const changedIndex = newValues.findIndex((dv, index) => dv !== previousValues[index]);
+          if (changedIndex !== -1) {
+            manageMinMaxRange(newValues, changedIndex, minRange, maxRange, min, max, pushRange);
+          }
+        }
+      }
+      previousValues = newValues;
+      return newValues;
     },
     utils_writables.typeArray.equal
   );
@@ -409,14 +501,25 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
   };
   const horizontal$ = tansu.computed(() => !vertical$());
   const containerDirective = utils_directive.createAttributesDirective(() => ({
+    classNames: {
+      "au-slider": utils_stores.true$,
+      "au-slider-vertical": vertical$,
+      "au-slider-horizontal": horizontal$
+    },
+    attributes: {
+      class: stateProps.className$
+    }
+  }));
+  const contentDirective = utils_directive.createAttributesDirective(() => ({
     attributes: {
       "aria-disabled": tansu.computed(() => disabled$() ? "true" : void 0),
       class: stateProps.className$
     },
     classNames: {
-      "au-slider": utils_stores.true$,
+      "au-slider-content": utils_stores.true$,
       "au-slider-vertical": vertical$,
       "au-slider-horizontal": horizontal$,
+      "au-slider-with-labels": tansu.computed(() => showValueLabels$() || showMinMaxLabels$() || showTickValues$() && showTicks$()),
       disabled: disabled$
     }
   }));
@@ -598,7 +701,8 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
     patch,
     api: {},
     directives: {
-      sliderDirective: utils_directive.mergeDirectives(sliderDirective, resizeDirective, containerDirective),
+      sliderDirective: utils_directive.mergeDirectives(sliderDirective, resizeDirective, contentDirective),
+      containerDirective,
       progressDisplayDirective: utils_directive.createAttributesDirective((progressContext$) => ({
         styles: {
           left: tansu.computed(() => percent(progressContext$().option.left)),