sit-onyx 1.3.0-dev-20251027185548 → 1.3.0-dev-20251027213347

package/dist/components/OnyxPagination/OnyxInlinePagination.d.vue.ts

@@ -0,0 +1,9 @@
+import { OnyxPaginationProps } from './types.js';
+declare const _default: import('vue').DefineComponent<OnyxPaginationProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (page: number) => any;
+}, string, import('vue').PublicProps, Readonly<OnyxPaginationProps> & Readonly<{
+    "onUpdate:modelValue"?: ((page: number) => any) | undefined;
+}>, {
+    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -17,4 +17,10 @@ export type OnyxPaginationProps = DensityProp & {
      * Whether to show a skeleton pagination.
      */
     skeleton?: SkeletonInjected;
+    /**
+     * The display type of the pagination
+     * @default select
+     */
+    type?: PaginationType;
 };
+export type PaginationType = "select" | "inline";

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

@@ -0,0 +1,21 @@
+import { OnyxSliderProps, SliderMode, SliderValue } 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 onValidityChange?: ((validity: ValidityState) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: SliderValue<TSliderMode>) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onValidityChange"> & OnyxSliderProps<TSliderMode> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "validityChange", validity: ValidityState) => void) & ((evt: "update:modelValue", value: SliderValue<TSliderMode>) => 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/OnyxSlider/types.d.ts

@@ -0,0 +1,106 @@
+import { CustomValidityProp } from '../../composables/useFormElementError.js';
+import { SkeletonInjected } from '../../composables/useSkeletonState.js';
+import { Orientation } from '../../types/index.js';
+import { OnyxFormElementProps } from '../OnyxFormElement/types.js';
+export declare const SLIDER_CONTROLS: readonly ["icon", "value", "input"];
+export type SliderControl = (typeof SLIDER_CONTROLS)[number];
+export type SliderMark = {
+    value: number;
+    label?: string;
+} | number;
+export declare const SLIDER_MODES: readonly ["single", "range"];
+export type SliderMode = (typeof SLIDER_MODES)[number];
+export type SliderValue<TSliderMode extends SliderMode> = TSliderMode extends "single" ? number : [number, number];
+export type OnyxSliderProps<TSliderMode extends SliderMode> = CustomValidityProp & Omit<OnyxFormElementProps<SliderValue<TSliderMode>>, "autocapitalize" | "autocomplete" | "loading" | "minlength" | "maxlength" | "placeholder" | "readonly" | "required" | "requiredMarker" | "withCounter" | "modelValue"> & {
+    /**
+     * Defines the mode of the slider.
+     *
+     * - `single`: A single-thumb slider for selecting one value.
+     * - `range`: A range slider with two thumbs for selecting a value range.
+     *
+     * @default "single"
+     */
+    mode?: TSliderMode;
+    /**
+     * Current value(s) of the slider.
+     *
+     * - `single` mode: provide a single value, e.g. `42`.
+     * - `range` mode: provide two values, e.g. `[20, 80]`.
+     *
+     * Constraints:
+     * - Each value must be within `[min, max]`.
+     * - Values should align to `step` (when `discrete` is true they will snap).
+     * - For `range` mode, values should be in ascending order.
+     *
+     * Recommended defaults (if your product has no specific initial value):
+     * - `single` mode: middle of the range → `(min + max) / 2`.
+     * - `range` mode: full range → `[min, max]`.
+     */
+    modelValue: SliderValue<TSliderMode>;
+    /**
+     * Smallest possible number.
+     */
+    min?: number;
+    /**
+     * Highest possible number.
+     */
+    max?: number;
+    /**
+     * Step size.
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Step size when holding shift key or using Page Up/Page Down keys.
+     *
+     * Defaults to 10% of the total range (max - min) multiplied by the step size.
+     * This provides intuitive behavior that automatically scales with different slider ranges.
+     */
+    shiftStep?: number;
+    /**
+     * Marks to show for each step.
+     * - If set to `true`, marks will be generated automatically based on `step` prop.
+     * - If an array of `SliderMark` is provided, marks will be shown at the specified values with optional labels.
+     * - If set to `false`, no marks will be displayed.
+     *
+     * @default false
+     */
+    marks?: SliderMark[] | boolean;
+    /**
+     * 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.
+     */
+    control?: SliderControl;
+    /**
+     * Orientation of the slider.
+     *
+     * @default "horizontal"
+     */
+    orientation?: Orientation;
+    /**
+     * When to show the tooltip with the current value over the thumb.
+     *
+     * @default undefined
+     */
+    disableTooltip?: boolean;
+    /**
+     * Whether to show a skeleton slider.
+     */
+    skeleton?: SkeletonInjected;
+    /**
+     * Whether to render the slider in discrete mode.
+     * In discrete mode, the slider will snap to the nearest step/mark.
+     *
+     * @default false
+     */
+    discrete?: boolean;
+    /**
+     * Label to show above the form element. Required due to accessibility / screen readers.
+     * If you want to visually hide the label, use the `hideLabel` property.
+     */
+    label: string;
+};

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

@@ -169,6 +169,8 @@
         "ofPages": "von 1 Seite | von {n} Seiten",
         "previous": "vorherige Seite",
         "next": "nächste Seite",
+        "buttonLabel": "Seite {page}",
+        "morePages": "Weitere Seiten",
         "select": {
             "label": "Seiten-Auswahl",
             "listLabel": "Verfügbare Seiten"

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

@@ -169,6 +169,8 @@
         "ofPages": "of {pages} page | of {pages} pages",
         "previous": "previous page",
         "next": "next page",
+        "buttonLabel": "Page {page}",
+        "morePages": "More pages in between",
         "select": {
             "label": "Page selection",
             "listLabel": "Available pages"

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

@@ -169,6 +169,8 @@ declare const _default: {
     "ofPages": "of {pages} page | of {pages} pages",
     "previous": "previous page",
     "next": "next page",
+    "buttonLabel": "Page {page}",
+    "morePages": "More pages in between",
     "select": {
       "label": "Page selection",
       "listLabel": "Available pages"

package/dist/index.d.ts

@@ -125,6 +125,8 @@ export * from './components/OnyxSidebar/modules/index.js';
 export { default as OnyxSidebar } from './components/OnyxSidebar/OnyxSidebar.vue';
 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 OnyxStepper } from './components/OnyxStepper/OnyxStepper.vue';
 export * from './components/OnyxStepper/types.js';
 export { default as OnyxSwitch } from './components/OnyxSwitch/OnyxSwitch.vue';