sit-onyx 1.4.0-dev-20251106105154 → 1.4.0-dev-20251106141823

package/dist/components/OnyxSlider/types.d.ts

@@ -1,8 +1,7 @@
 import { CustomValidityProp } from '../../composables/useFormElementError.js';
 import { SkeletonInjected } from '../../composables/useSkeletonState.js';
 import { OnyxFormElementProps } from '../OnyxFormElement/types.js';
-export declare const SLIDER_CONTROLS: readonly ["icon", "value", "input"];
-export type SliderControl = (typeof SLIDER_CONTROLS)[number];
+import { SliderControl } from '../OnyxSliderControl/types.js';
 export type SliderMark = {
     value: number;
     label?: string;
@@ -70,8 +69,9 @@ export type OnyxSliderProps<TSliderMode extends SliderMode> = CustomValidityProp
      * Defines if and which control to display in addition to the slider.
      * Can be used to e.g. display inputs or icon buttons that can also be used to change the value.
      *
-     * - `value`: shows min and max value labels.
-     * - `icon`: shows icon buttons to increment/decrement the value. The buttons increment/decrement by the shiftStep value. Available only for `single` mode.
+     * - `value`: shows min and max value labels. Works in both `single` and `range` modes for discrete and non-discrete sliders.
+     * - `icon`: shows icon buttons to increment/decrement the value. Works only in `single` mode for discrete and non-discrete sliders.
+     * - `input`: shows `<OnyxStepper />` components to input the value directly. Works in both `single` and `range` modes for discrete and non-discrete sliders.
      */
     control?: SliderControl;
     /**

package/dist/components/OnyxSliderControl/OnyxSliderControl.d.vue.ts

@@ -0,0 +1,21 @@
+import { SliderMode } from '../OnyxSlider/types.js';
+import { OnyxSliderControlProps } from './types.js';
+/**
+ * @experimental
+ * @deprecated This component is still under active development and its API might change in patch releases.
+ */
+declare const _default: <TSliderMode extends SliderMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & OnyxSliderControlProps & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", value: number) => void;
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/OnyxSliderControl/types.d.ts

@@ -0,0 +1,48 @@
+import { DensityProp } from '../../composables/density.js';
+export declare const SLIDER_CONTROLS: readonly ["icon", "value", "input"];
+export type SliderControl = (typeof SLIDER_CONTROLS)[number];
+export type OnyxSliderControlSharedProps = {
+    /**
+     * The type of control to render.
+     *
+     * - `value`: Renders a read-only display of the provided slider value.
+     * - `icon`: Renders an icon button for increasing or decreasing the slider value.
+     * - `input`: Renders an `<OnyxStepper />` component for direct value entry.
+     */
+    control: SliderControl;
+    /**
+     * Slider control model value
+     */
+    modelValue?: number;
+    /**
+     * The direction the icon button represents.
+     *
+     * - `decrease`: Decreases the slider value and renders a "minus" icon.
+     * - `increase`: Increases the slider value and renders a "plus" icon.
+     */
+    direction?: "increase" | "decrease";
+    /**
+     * `shiftStep` of associated slider. Used to determine the amount to increase/decrease the value by when the icon button is clicked.
+     */
+    shiftStep?: number;
+    /**
+     * Indicates whether the control is disabled.
+     */
+    disabled?: boolean;
+};
+export type OnyxSliderControlValueProps = {
+    control: "value";
+    modelValue: number;
+};
+export type OnyxSliderControlIconProps = {
+    control: "icon";
+    direction: "increase" | "decrease";
+    shiftStep: number;
+    disabled?: boolean;
+};
+export type OnyxSliderControlInputProps = {
+    control: "input";
+    disabled?: boolean;
+    modelValue: number;
+};
+export type OnyxSliderControlProps = OnyxSliderControlSharedProps & DensityProp & (OnyxSliderControlValueProps | OnyxSliderControlIconProps | OnyxSliderControlInputProps);

package/dist/i18n/locales/de-DE.json

@@ -239,8 +239,9 @@
         }
     },
     "slider": {
-        "decreaseValue": "Wert um {n} verringern",
-        "increaseValue": "Wert um {n} erhöhen"
+        "decreaseValueBy": "Wert um {n} verringern",
+        "increaseValueBy": "Wert um {n} erhöhen",
+        "changeValue": "Wert ändern"
     },
     "codeTabs": {
         "label": "Codeausschnitte",

package/dist/i18n/locales/en-US.json

@@ -242,8 +242,9 @@
         }
     },
     "slider": {
-        "decreaseValue": "Decrease value by {n}",
-        "increaseValue": "Increase value by {n}"
+        "decreaseValueBy": "Decrease value by {n}",
+        "increaseValueBy": "Increase value by {n}",
+        "changeValue": "Change value"
     },
     "codeTabs": {
         "label": "Code snippets",

package/dist/i18n/locales/en-US.json.d.ts

@@ -242,8 +242,9 @@ declare const _default: {
     }
   },
   "slider": {
-    "decreaseValue": "Decrease value by {n}",
-    "increaseValue": "Increase value by {n}"
+    "decreaseValueBy": "Decrease value by {n}",
+    "increaseValueBy": "Increase value by {n}",
+    "changeValue": "Change value"
   },
   "codeTabs": {
     "label": "Code snippets",

package/dist/index.d.ts

@@ -131,6 +131,8 @@ export * from './components/OnyxSidebar/types.js';
 export { default as OnyxSkeleton } from './components/OnyxSkeleton/OnyxSkeleton.vue';
 export { default as OnyxUnstableSlider } from './components/OnyxSlider/OnyxSlider.vue';
 export * from './components/OnyxSlider/types.js';
+export { default as OnyxUnstableSliderControl } from './components/OnyxSliderControl/OnyxSliderControl.vue';
+export * from './components/OnyxSliderControl/types.js';
 export { default as OnyxStepper } from './components/OnyxStepper/OnyxStepper.vue';
 export * from './components/OnyxStepper/types.js';
 export { default as OnyxSwitch } from './components/OnyxSwitch/OnyxSwitch.vue';