@weni/unnnic-system 3.2.9-alpha.1 → 3.2.9-alpha.10

package/CHANGELOG.md

@@ -5,6 +5,24 @@ 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.2.10 (2025-10-07)
+
+### Added
+
+- **DataTable**: Added optional `sort` prop for external sort state control:
+  - **Controlled Mode**: Pass `sort` prop to control sort state externally
+  - **Uncontrolled Mode**: Component manages sort state internally (default behavior)
+  - **v-model Support**: Full support for `v-model:sort` pattern
+  - **Backward Compatible**: Existing implementations continue working without changes
+
+# 3.2.9 (2025-10-03)
+
+### Fixed
+
+- **Chip Component**: Fixed layout shift issue when border state changes:
+  - **Consistent Sizing**: Component now maintains consistent dimensions regardless of border visibility
+  - **Smooth Transitions**: Eliminated visual "jumps" when toggling between selected/unselected states
+
 # 3.2.8 (2025-09-25)
 
 ### Changed

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.vue"],"names":[],"mappings":"AA6BA;AAqIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;;;;;;AAsHzC,wBAQG"}
+{"version":3,"file":"Chip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.vue"],"names":[],"mappings":"AA6BA;AAsIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;;;;;;AAsHzC,wBAQG"}

package/dist/components/DataTable/index.vue.d.ts

@@ -8,6 +8,11 @@ type DataTableHeader = {
 type DataTableItem = {
     [key: string]: any;
 };
+type SortState = {
+    header: string;
+    itemKey: string;
+    order: string;
+};
 interface Props {
     headers: DataTableHeader[];
     items: DataTableItem[];
@@ -23,6 +28,7 @@ interface Props {
     pageTotal?: number;
     pageInterval?: number;
     locale?: string;
+    sort?: SortState;
 }
 declare function __VLS_template(): any;
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -44,6 +50,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     "onUpdate:page"?: ((page: number) => any) | undefined;
 }>, {
     size: "sm" | "md";
+    sort: SortState;
     height: string;
     clickable: boolean;
     locale: string;

package/dist/components/DataTable/index.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/index.vue"],"names":[],"mappings":"AAqKA;AAyeA,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,UAAU,KAAK;IACb,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA4HD,iBAAS,cAAc,QAyPtB;AAsBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;gBAnYa,MAAM;iBAAW,MAAM;eAAS,MAAM;;;;;;gBAAtC,MAAM;iBAAW,MAAM;eAAS,MAAM;;;;;UApB/D,IAAI,GAAG,IAAI;YACT,MAAM;eAEH,OAAO;YAOV,MAAM;eAXH,OAAO;iBAML,OAAO;eAHT,MAAM;kBAEH,OAAO;oBAEL,OAAO;UACjB,MAAM;eACD,MAAM;kBACH,MAAM;6EAuZrB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/index.vue"],"names":[],"mappings":"AAqKA;AAwfA,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,KAAK;IACb,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAqID,iBAAS,cAAc,QAyPtB;AAsBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;gBA5Ya,MAAM;iBAAW,MAAM;eAAS,MAAM;;;;;;gBAAtC,MAAM;iBAAW,MAAM;eAAS,MAAM;;;;;UArB/D,IAAI,GAAG,IAAI;UAWX,SAAS;YAVP,MAAM;eAEH,OAAO;YAOV,MAAM;eAXH,OAAO;iBAML,OAAO;eAHT,MAAM;kBAEH,OAAO;oBAEL,OAAO;UACjB,MAAM;eACD,MAAM;kBACH,MAAM;6EAiarB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -140,13 +140,25 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        readonly: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        forceActiveStatus: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        showClear: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>, {}, {
         val: string;
     }, {
         hasLabelSlot(): boolean;
     }, {
         fullySanitize: typeof import('../../utils/sanitize').fullySanitize;
-    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "clear")[], "update:modelValue" | "clear", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
         placeholder: {
             type: StringConstructor;
             default: string;
@@ -224,8 +236,21 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        readonly: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        forceActiveStatus: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        showClear: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & Readonly<{
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        onClear?: ((...args: any[]) => any) | undefined;
     }>, {
         size: string;
         type: string;
@@ -236,6 +261,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         modelValue: string;
         nativeType: string;
         maxlength: number | null;
+        readonly: boolean;
+        forceActiveStatus: boolean;
         placeholder: string;
         iconLeft: string;
         iconRight: string;
@@ -243,8 +270,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         iconRightClickable: boolean;
         allowTogglePassword: boolean;
         hasCloudyColor: boolean;
-        errors: string | unknown[];
+        showClear: boolean;
         tooltip: string;
+        errors: string | unknown[];
         showMaxlengthCounter: boolean;
     }, {}, {
         TextInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -301,6 +329,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 type: BooleanConstructor;
                 default: boolean;
             };
+            readonly: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            forceActiveStatus: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            showClear: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
         }>, {}, {
             isFocused: boolean;
             showPassword: boolean;
@@ -314,8 +354,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             onFocus(): void;
             onBlur(): void;
             onIconLeftClick(): void;
+            onClearClick(): void;
             onIconRightClick(): void;
-        }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("icon-left-click" | "icon-right-click")[], "icon-left-click" | "icon-right-click", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("clear" | "icon-left-click" | "icon-right-click")[], "clear" | "icon-left-click" | "icon-right-click", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
             placeholder: {
                 type: StringConstructor;
                 default: null;
@@ -369,7 +410,20 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 type: BooleanConstructor;
                 default: boolean;
             };
+            readonly: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            forceActiveStatus: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            showClear: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
         }>> & Readonly<{
+            onClear?: ((...args: any[]) => any) | undefined;
             "onIcon-left-click"?: ((...args: any[]) => any) | undefined;
             "onIcon-right-click"?: ((...args: any[]) => any) | undefined;
         }>, {
@@ -379,6 +433,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             modelValue: string;
             nativeType: string;
             maxlength: number;
+            readonly: boolean;
+            forceActiveStatus: boolean;
             placeholder: string;
             iconLeft: string;
             iconRight: string;
@@ -386,6 +442,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             iconRightClickable: boolean;
             allowTogglePassword: boolean;
             hasCloudyColor: boolean;
+            showClear: boolean;
         }, {}, {
             BaseInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
                 type: {
@@ -411,15 +468,25 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 };
                 hasIconLeft: BooleanConstructor;
                 hasIconRight: BooleanConstructor;
+                hasClearIcon: BooleanConstructor;
                 maxlength: {
                     type: NumberConstructor;
                     default: null;
                 };
+                readonly: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
+                forceActiveStatus: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
             }>, {}, {}, {
                 attributes(): any;
                 classes(): (string | {
                     'input--has-icon-left': boolean;
                     'input--has-icon-right': boolean;
+                    'input--has-clear-icon': boolean;
                 })[];
             }, {
                 fullySanitize: typeof import('../../utils/sanitize').fullySanitize;
@@ -447,10 +514,19 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 };
                 hasIconLeft: BooleanConstructor;
                 hasIconRight: BooleanConstructor;
+                hasClearIcon: BooleanConstructor;
                 maxlength: {
                     type: NumberConstructor;
                     default: null;
                 };
+                readonly: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
+                forceActiveStatus: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
             }>> & Readonly<{
                 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             }>, {
@@ -459,9 +535,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 mask: string | unknown[];
                 hasIconLeft: boolean;
                 hasIconRight: boolean;
+                hasClearIcon: boolean;
                 modelValue: string;
                 nativeType: string;
                 maxlength: number;
+                readonly: boolean;
+                forceActiveStatus: boolean;
             }, {}, {}, {
                 mask: any;
             }, string, import('vue').ComponentProvideOptions, true, {}, any>;
@@ -483,98 +562,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 scheme: import('../Icon.vue').SchemeColor;
             }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
         }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-        UnnnicToolTip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-            text: {
-                type: StringConstructor;
-                default: string;
-            };
-            enabled: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            forceOpen: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            side: {
-                type: StringConstructor;
-                default: string;
-                validator(value: unknown): boolean;
-            };
-            maxWidth: {
-                type: StringConstructor;
-                default: string;
-            };
-            shortcutText: {
-                type: StringConstructor;
-                default: null;
-            };
-            enableHtml: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>, {}, {
-            topPos: null;
-            leftPos: null;
-        }, {}, {
-            handleResize(): void;
-            getRightPost(element: any): void;
-        }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-            text: {
-                type: StringConstructor;
-                default: string;
-            };
-            enabled: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            forceOpen: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            side: {
-                type: StringConstructor;
-                default: string;
-                validator(value: unknown): boolean;
-            };
-            maxWidth: {
-                type: StringConstructor;
-                default: string;
-            };
-            shortcutText: {
-                type: StringConstructor;
-                default: null;
-            };
-            enableHtml: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>> & Readonly<{}>, {
-            text: string;
-            enabled: boolean;
-            forceOpen: boolean;
-            side: string;
-            maxWidth: string;
-            shortcutText: string;
-            enableHtml: boolean;
-        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-        UnnnicIcon: import('vue').DefineComponent<import('../Icon.vue').IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            click: (event: Event) => any;
-            mousedown: (event: Event) => any;
-            mouseup: (event: Event) => any;
-        }, string, import('vue').PublicProps, Readonly<import('../Icon.vue').IconProps> & Readonly<{
-            onClick?: ((event: Event) => any) | undefined;
-            onMousedown?: ((event: Event) => any) | undefined;
-            onMouseup?: ((event: Event) => any) | undefined;
-        }>, {
-            size: import('../Icon.vue').IconSize;
-            filled: boolean;
-            next: boolean;
-            icon: string | null;
-            clickable: boolean;
-            lineHeight: import('../Icon.vue').LineHeight | null;
-            scheme: import('../Icon.vue').SchemeColor;
-        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+        UnnnicLabel: import('vue').DefineComponent<import('../Label/Label.vue').LabelProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('../Label/Label.vue').LabelProps> & Readonly<{}>, {
+            label: string;
+            tooltip: string;
+            useHtmlTooltip: boolean;
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
     }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/Input/BaseInput.vue.d.ts

@@ -23,15 +23,25 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     hasIconLeft: BooleanConstructor;
     hasIconRight: BooleanConstructor;
+    hasClearIcon: BooleanConstructor;
     maxlength: {
         type: NumberConstructor;
         default: null;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    forceActiveStatus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {
     attributes(): any;
     classes(): (string | {
         'input--has-icon-left': boolean;
         'input--has-icon-right': boolean;
+        'input--has-clear-icon': boolean;
     })[];
 }, {
     fullySanitize: typeof fullySanitize;
@@ -59,10 +69,19 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     hasIconLeft: BooleanConstructor;
     hasIconRight: BooleanConstructor;
+    hasClearIcon: BooleanConstructor;
     maxlength: {
         type: NumberConstructor;
         default: null;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    forceActiveStatus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -71,9 +90,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     mask: string | unknown[];
     hasIconLeft: boolean;
     hasIconRight: boolean;
+    hasClearIcon: boolean;
     modelValue: string;
     nativeType: string;
     maxlength: number;
+    readonly: boolean;
+    forceActiveStatus: boolean;
 }, {}, {}, {
     mask: any;
 }, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/Input/BaseInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Input/BaseInput.vue"],"names":[],"mappings":"AAkBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAqI8B,sBAAsB"}
+{"version":3,"file":"BaseInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Input/BaseInput.vue"],"names":[],"mappings":"AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAwJ8B,sBAAsB"}