@weni/unnnic-system 3.11.1-alpha.1 → 3.11.1-alpha.4

package/CHANGELOG.md

@@ -5,6 +5,38 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+# 3.11.1 (2025-11-27)
+
+### Added
+
+- **DatePicker Component**:
+  - Added `periodBaseDate` prop to allow custom reference dates for predefined periods (e.g. `last-7-days`, `last-12-months`, `current-month`, `previous-month`), enabling use cases like "Last 7 days (up to 24h ago)".
+  - Added `data-testid` attributes to key interactive elements (root, navigation buttons, day/month/year cells, options, clear/apply buttons) to improve testability and coverage quality.
+  - Added new Storybook stories demonstrating multiple usage patterns:
+    - `SmallDayPicker` (type `day`, size `small`)
+    - `MonthView` (type `month`)
+    - `YearView` (type `year`)
+    - `WithMinAndMaxDateRange` (date range constrained by `minDate` and `maxDate`)
+    - `WithCustomLabelsAndDisableClear` (custom action/clear labels and `disableClear`)
+    - `CustomRelativePeriodsWithBaseDate` (custom relative filters backed by `periodBaseDate`).
+- **InputDatePicker Component**:
+  - Added `periodBaseDate` prop passthrough so external consumers can leverage the new relative date presets from `UnnnicDatePicker` (e.g. "Last 7 days (up to 24h ago)").
+  - Added new Storybook story `WithCustomRelativePeriodsAndBaseDate` showcasing InputDatePicker with relative filters backed by `periodBaseDate`.
+  - Added focused unit tests for InputDatePicker covering integration with DatePicker, v-model behavior, formatting, and dropdown open/close logic.
+
+### Changed
+
+- **DatePicker Component**:
+  - Migrated implementation to `<script setup lang="ts">` with Vue 3 Composition API while preserving the existing public API (props, events, and behavior) for backward compatibility.
+  - Normalized internal date-handling logic to use typed helpers (`dateToString`, `stringToTime`, etc.) for safer arithmetic across day, month, and year views.
+- **InputDatePicker Component**:
+  - Migrated implementation to `<script setup lang="ts">` Composition API while preserving existing props (`modelValue`, `type`, `format`, `inputFormat`, etc.), events, and visual behavior for backward compatibility.
+
+### Fixed
+
+- **DatePicker Component**:
+  - Corrected month label rendering in `type="month"` view by aligning month indices with the localized `monthsLocale` array (fixes incorrect labels and potential indexing errors).
+
 # 3.11.0 (2025-11-24)
 
 ### Added

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

@@ -1,262 +1,82 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    initialStartDate: {
-        type: StringConstructor;
-        default: string;
-    };
-    initialEndDate: {
-        type: StringConstructor;
-        default: string;
-    };
-    minDate: {
-        type: StringConstructor;
-        default: string;
-    };
-    maxDate: {
-        type: StringConstructor;
-        default: string;
-    };
-    equivalentOption: {
-        type: StringConstructor;
-        default: string;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-        validator(type: unknown): boolean;
-    };
-    size: {
-        type: StringConstructor;
-        default: string;
-        validator(size: unknown): boolean;
-    };
-    clearLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    actionLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    months: {
-        type: ArrayConstructor;
-        default: () => never[];
-        validator(months: unknown): boolean;
-    };
-    days: {
-        type: ArrayConstructor;
-        default: () => never[];
-        validator(days: unknown): boolean;
-    };
-    options: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    disableClear: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {
-    referenceDate: string;
-    startDate: string;
-    endDate: string;
-    optionSelected: string;
-    defaultTranslations: {
-        clean: {
-            'pt-br': string;
-            en: string;
-            es: string;
-        };
-        filter: {
-            'pt-br': string;
-            en: string;
-            es: string;
-        };
-    };
-}, {
-    openMonths(): string[];
-    value(): {
+type PeriodOption = {
+    id: string;
+    name: string;
+};
+export interface DatePickerProps {
+    initialStartDate?: string;
+    initialEndDate?: string;
+    minDate?: string;
+    maxDate?: string;
+    periodBaseDate?: string;
+    equivalentOption?: string;
+    type?: 'day' | 'month' | 'year';
+    size?: 'small' | 'large';
+    clearLabel?: string;
+    actionLabel?: string;
+    months?: string[];
+    days?: string[];
+    options?: PeriodOption[];
+    disableClear?: boolean;
+    locale?: string;
+    translations?: Record<string, unknown>;
+}
+declare function dateToString(date: Date): string;
+declare function getDatesOfTheMonth(reference: string): {
+    properties: string[];
+    toString: () => string;
+}[];
+declare function getStartAndEndDateByPeriod(period: string): {
+    startDate: string | undefined;
+    endDate: string | undefined;
+};
+declare function autoSelect(method: string): void;
+declare const _default: import('vue').DefineComponent<DatePickerProps, {
+    i18n: (...args: any[]) => string | undefined;
+    startDate: import('vue').Ref<string, string>;
+    endDate: import('vue').Ref<string, string>;
+    optionSelected: import('vue').Ref<string, string>;
+    referenceDate: import('vue').Ref<string, string>;
+    autoSelect: typeof autoSelect;
+    dateToString: typeof dateToString;
+    getStartAndEndDateByPeriod: typeof getStartAndEndDateByPeriod;
+    getDatesOfTheMonth: typeof getDatesOfTheMonth;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: {
         startDate: string;
         endDate: string;
-    };
-    i18nLocale(): string;
-    monthsLocale(): any;
-    daysLocale(): any;
-    periodsLocale(): any;
-    clearText(): any;
-    filterText(): any;
-}, {
-    submit(): void;
-    updateOptionSelected(): void;
-    dateToString(date: any): string;
-    dateToStringMonth(date: any): string;
-    dateToStringYear(date: any): any;
-    stringToTime(date: any): number;
-    getDate(date: any): any;
-    getMonth(date: any): any;
-    getFullYear(date: any): number;
-    addMonth(referenceDate: any, quantity: any): string;
-    isDateBetween(internalDate: any): boolean;
-    isDateBetweenMonth(internalDate: any): boolean;
-    isDateBetweenYear(internalDate: any): boolean;
-    getDatesOfTheMonth(referenceDate: any): {
-        properties: string[];
-        toString: () => string;
-    }[];
-    getMonthsOfTheYear(referenceDate: any): {
-        properties: string[];
-        date: string;
-        toString: () => string;
-    }[];
-    getYears(referenceDate: any): {
-        properties: string[];
-        date: number;
-        toString: () => string;
-    }[];
-    selectDate(date: any): void;
-    clear(): void;
-    getStartAndEndDateByPeriod(period: any): {
-        startDate: string | undefined;
-        endDate: string | undefined;
-    };
-    autoSelect(method: any): void;
-}, {
-    props: {
-        locale: {
-            type: StringConstructor;
-        };
-        translations: {
-            type: ObjectConstructor;
-        };
-    };
-    methods: {
-        i18n(...args: any[]): any;
-    };
-}, import('vue').ComponentOptionsMixin, ("change" | "submit" | "update:equivalentOption")[], "change" | "submit" | "update:equivalentOption", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    initialStartDate: {
-        type: StringConstructor;
-        default: string;
-    };
-    initialEndDate: {
-        type: StringConstructor;
-        default: string;
-    };
-    minDate: {
-        type: StringConstructor;
-        default: string;
-    };
-    maxDate: {
-        type: StringConstructor;
-        default: string;
-    };
-    equivalentOption: {
-        type: StringConstructor;
-        default: string;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-        validator(type: unknown): boolean;
-    };
-    size: {
-        type: StringConstructor;
-        default: string;
-        validator(size: unknown): boolean;
-    };
-    clearLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    actionLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    months: {
-        type: ArrayConstructor;
-        default: () => never[];
-        validator(months: unknown): boolean;
-    };
-    days: {
-        type: ArrayConstructor;
-        default: () => never[];
-        validator(days: unknown): boolean;
-    };
-    options: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    disableClear: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
-    onSubmit?: ((...args: any[]) => any) | undefined;
-    "onUpdate:equivalentOption"?: ((...args: any[]) => any) | undefined;
+    }) => any;
+    submit: (value: {
+        startDate: string;
+        endDate: string;
+    }) => any;
+    "update:equivalentOption": (equivalentOption: string) => any;
+}, string, import('vue').PublicProps, Readonly<DatePickerProps> & Readonly<{
+    onChange?: ((value: {
+        startDate: string;
+        endDate: string;
+    }) => any) | undefined;
+    onSubmit?: ((value: {
+        startDate: string;
+        endDate: string;
+    }) => any) | undefined;
+    "onUpdate:equivalentOption"?: ((equivalentOption: string) => any) | undefined;
 }>, {
-    type: string;
-    size: string;
+    type: "day" | "month" | "year";
+    size: "small" | "large";
+    locale: string;
     initialStartDate: string;
     initialEndDate: string;
     minDate: string;
     maxDate: string;
+    periodBaseDate: string;
     equivalentOption: string;
     clearLabel: string;
     actionLabel: string;
-    months: unknown[];
-    days: unknown[];
-    options: unknown[];
+    months: string[];
+    days: string[];
+    options: PeriodOption[];
     disableClear: boolean;
-}, {}, {
-    UnnnicButton: {
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../Button/types.js').ButtonProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
-            disabled: boolean;
-            type: import('../Button/types.js').ButtonType;
-            size: import('../Button/types.js').ButtonSize;
-            text: string;
-            iconLeft: string;
-            iconRight: string;
-            float: boolean;
-            iconCenter: string;
-            iconsFilled: boolean;
-            loading: boolean;
-        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLButtonElement, import('vue').ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import('../Button/types.js').ButtonProps> & Readonly<{}>, {}, {}, {}, {}, {
-            disabled: boolean;
-            type: import('../Button/types.js').ButtonType;
-            size: import('../Button/types.js').ButtonSize;
-            text: string;
-            iconLeft: string;
-            iconRight: string;
-            float: boolean;
-            iconCenter: string;
-            iconsFilled: boolean;
-            loading: boolean;
-        }>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import('vue').ComponentOptionsBase<Readonly<import('../Button/types.js').ButtonProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
-        disabled: boolean;
-        type: import('../Button/types.js').ButtonType;
-        size: import('../Button/types.js').ButtonSize;
-        text: string;
-        iconLeft: string;
-        iconRight: string;
-        float: boolean;
-        iconCenter: string;
-        iconsFilled: boolean;
-        loading: boolean;
-    }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-        $slots: {
-            default?(_: {}): any;
-        };
-    });
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    translations: Record<string, unknown>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;
 //# sourceMappingURL=DatePicker.vue.d.ts.map

package/dist/components/DatePicker/DatePicker.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.vue"],"names":[],"mappings":"AAyNA;"}
+{"version":3,"file":"DatePicker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.vue"],"names":[],"mappings":"AAiPA;AAooCA,KAAK,YAAY,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAEzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACxC;AA0LD,iBAAS,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAExC;AAiGD,iBAAS,kBAAkB,CAAC,SAAS,EAAE,MAAM;gBAUhB,MAAM,EAAE;cAAY,MAAM,MAAM;IAsE5D;AAgLD,iBAAS,0BAA0B,CAAC,MAAM,EAAE,MAAM;;;EAwDjD;AAED,iBAAS,UAAU,CAAC,MAAM,EAAE,MAAM,QAwBjC;;oBA/gBwB,GAAG,EAAE,KAAG,MAAM,GAAG,SAAS;;;;;;;;;;;mBAzEf,MAAM;iBAAW,MAAM;;;mBACvB,MAAM;iBAAW,MAAM;;;;;mBADvB,MAAM;iBAAW,MAAM;;;mBACvB,MAAM;iBAAW,MAAM;;;;UAtClD,KAAK,GAAG,OAAO,GAAG,MAAM;UACxB,OAAO,GAAG,OAAO;YAWf,MAAM;sBAtBI,MAAM;oBACR,MAAM;aAEb,MAAM;aACN,MAAM;oBAEC,MAAM;sBAEJ,MAAM;gBAKZ,MAAM;iBACL,MAAM;YAEX,MAAM,EAAE;UACV,MAAM,EAAE;aACL,YAAY,EAAE;kBAET,OAAO;kBAGP,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;AAsoCxC,wBAUG"}

package/dist/components/Drawer/Drawer.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.vue"],"names":[],"mappings":"AAmFA;wBA2mBqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAZjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2OASG"}
+{"version":3,"file":"Drawer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.vue"],"names":[],"mappings":"AAmFA;wBAmnBqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAZjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2OASG"}