sit-onyx 1.2.0-dev-20251013061826 → 1.2.0-dev-20251014161744

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

@@ -1,34 +1,57 @@
-import { OnyxCalendarProps } from './types.js';
+import { OnyxCalendarProps, OnyxCalendarSelectionMode, OnyxCalendarSize, OnyxCalendarValueBySelection } from './types.js';
 /**
  * @experimental
  * @deprecated This component is still under active development and its API might change in patch releases.
  */
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<OnyxCalendarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:selectedDate": (...args: any[]) => void;
-}, string, import('vue').PublicProps, Readonly<OnyxCalendarProps> & Readonly<{
-    "onUpdate:selectedDate"?: ((...args: any[]) => any) | undefined;
-}>, {
-    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
-    disabled: boolean;
-    size: import('./types.js', { with: { "resolution-mode": "import" } }).OnyxCalendarSize;
-    selection: import('./types.js', { with: { "resolution-mode": "import" } }).OnyxCalendarSelection;
-    weekStartDay: import('./types.js', { with: { "resolution-mode": "import" } }).OnyxWeekDays;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    calendar: HTMLDivElement;
-}, any>, Readonly<{
-    /**
-     * Optional slot that is displayed below at the right of the Header.
-     */
-    actions?(): unknown;
-}> & {
-    /**
-     * Optional slot that is displayed below at the right of the Header.
-     */
-    actions?(): unknown;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
+declare const _default: <TSelection extends OnyxCalendarSelectionMode>(__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"?: ((newDate: OnyxCalendarValueBySelection<TSelection>) => any) | undefined;
+        readonly "onUpdate:viewMonth"?: ((newDate: Date) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:viewMonth"> & OnyxCalendarProps<TSelection> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        /**
+         * Optional slot that is displayed below at the right of the Header.
+         */
+        actions?(): unknown;
+        /**
+         * Optional slot that is displayed inside each day, for custom calender content.
+         */
+        day?(props: {
+            /**
+             * Date that the slot is rendered for.
+             */
+            date: Date;
+            /**
+             * Actual size of the calendar.
+             */
+            size: Exclude<OnyxCalendarSize, "auto">;
+        }): unknown;
+    }> & {
+        /**
+         * Optional slot that is displayed below at the right of the Header.
+         */
+        actions?(): unknown;
+        /**
+         * Optional slot that is displayed inside each day, for custom calender content.
+         */
+        day?(props: {
+            /**
+             * Date that the slot is rendered for.
+             */
+            date: Date;
+            /**
+             * Actual size of the calendar.
+             */
+            size: Exclude<OnyxCalendarSize, "auto">;
+        }): unknown;
     };
+    emit: ((evt: "update:modelValue", newDate: OnyxCalendarValueBySelection<TSelection>) => void) & ((evt: "update:viewMonth", newDate: Date) => 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/OnyxCalendar/types.d.ts

@@ -1,6 +1,12 @@
 import { DensityProp } from '../../composables/density.js';
 import { SkeletonInjected } from '../../composables/useSkeletonState.js';
-export type OnyxCalendarProps = DensityProp & {
+import { Nullable } from '../../types/utils.js';
+import { DateValue } from '../OnyxDatePicker/types.js';
+export type OnyxCalendarProps<TSelection extends OnyxCalendarSelectionMode> = DensityProp & {
+    /**
+     * Selected Value
+     */
+    modelValue?: Nullable<OnyxCalendarValueBySelection<TSelection>>;
     /**
      * Whether the calendar is disabled. Disables all interactions and prevents date selection.
      */
@@ -19,10 +25,11 @@ export type OnyxCalendarProps = DensityProp & {
      */
     weekStartDay?: OnyxWeekDays;
     /**
-     * The initial date to display when the calendar is first rendered.
+     * The month / year that is currently visible. If unset, it will be managed internally.
+     * Useful if you want to switch the view month programmatically.
      * @default today
      */
-    initialDate?: Date;
+    viewMonth?: Nullable<DateValue>;
     /**
      * The visual size of the calendar.
      * - "big": larger layout with more spacing and bigger text
@@ -35,11 +42,20 @@ export type OnyxCalendarProps = DensityProp & {
      */
     skeleton?: SkeletonInjected;
     /**
-     * The selection mode for dates.
-     * TODO: support "multiple" and "range".
+     * Defines how dates are selected in the calendar.
+     * If undefined, no selection will be possible.
      */
-    selection?: OnyxCalendarSelection;
+    selectionMode?: TSelection;
+    /**
+     * Whether to show week numbers in the calendar.
+     */
+    showCalendarWeeks?: boolean;
 };
-export type OnyxCalendarSelection = "single";
+export type OnyxCalendarSelectionMode = "single" | "multiple" | "range";
 export type OnyxCalendarSize = "big" | "small" | "auto";
 export type OnyxWeekDays = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";
+export type DateRange = {
+    start: Date;
+    end: Date;
+};
+export type OnyxCalendarValueBySelection<TSelection extends OnyxCalendarSelectionMode> = TSelection extends "single" ? Date : TSelection extends "multiple" ? Date[] : TSelection extends "range" ? DateRange : never;

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

@@ -0,0 +1,33 @@
+import { OnyxCalendarCellProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Optional slot for custom cell content.
+         */
+        default?(): unknown;
+    }> & {
+        /**
+         * Optional slot for custom cell content.
+         */
+        default?(): unknown;
+    };
+    refs: {};
+    rootEl: HTMLTableCellElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxCalendarCellProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    hovered: () => any;
+}, string, import('vue').PublicProps, Readonly<OnyxCalendarCellProps> & Readonly<{
+    onHovered?: (() => any) | undefined;
+}>, {
+    is: "div" | "button";
+    backgroundColor: "tinted" | "blank";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableCellElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,31 @@
+import { HTMLAttributes } from 'vue';
+import { DensityProp } from '../../composables/density.js';
+import { OnyxColor } from '../../types/colors.js';
+import { OnyxCalendarSize } from '../OnyxCalendar/types.js';
+export type OnyxCalendarCellProps = DensityProp & {
+    /**
+     * Numeric date / day of the month.
+     */
+    date: number;
+    size: OnyxCalendarSize;
+    is?: "div" | "button";
+    /**
+     * Whether the cell is disabled and can not be interacted with.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to visually show the cell as disabled but still allow it to be interactive.
+     */
+    showAsDisabled?: boolean;
+    /**
+     * Optional highlight color.
+     */
+    color?: Extract<OnyxColor, "neutral" | "primary">;
+    backgroundColor?: "tinted" | "blank";
+    /**
+     * Optionally define which range selection type the cell is currently active.
+     */
+    rangeType?: CalendarCellRangeType;
+    buttonAttributes?: HTMLAttributes;
+};
+export type CalendarCellRangeType = "start" | "middle" | "end";

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

@@ -228,6 +228,7 @@
     },
     "calendar": {
         "todayButton": { "label": "Heute", "tooltip": "Springe zu Heute" },
+        "calenderWeek": "KW",
         "previousMonthButton": "Vorheriger Monat",
         "nextMonthButton": "Nächster Monat"
     }

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

@@ -231,6 +231,7 @@
             "label": "Today",
             "tooltip": "Jump to today"
         },
+        "calenderWeek": "CW",
         "previousMonthButton": "Previous month",
         "nextMonthButton": "Next month"
     }

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

@@ -231,6 +231,7 @@ declare const _default: {
       "label": "Today",
       "tooltip": "Jump to today"
     },
+    "calenderWeek": "CW",
     "previousMonthButton": "Previous month",
     "nextMonthButton": "Next month"
   }