@fewangsit/wangsvue 1.5.206-alpha.0 → 1.5.206

package/components/basetree/BaseTree.vue.d.ts

@@ -420,6 +420,30 @@ export interface BaseTreeProps {
    * @default false
    */
   useOption?: boolean;
+
+  /**
+   * A function to determine when the node should be disabled,
+   * When true, it will disabled selection on current node and all level childrend
+   *
+   * @return true to disabled
+   */
+  disableNodeWhen?: (node: TreeNode) => boolean;
+
+  /**
+   * A function to determine when the node should be disabled
+   * It will only disable current node
+   *
+   * @return true to disabled
+   */
+  exactDisableNodeWhen?: (node: TreeNode) => boolean;
+
+  /**
+   * A function to determine when the node should selected
+   * It will only disable current node when propagateSelection false
+   *
+   * @return true to disabled
+   */
+  nodeSelectedWhen?: (node: TreeNode) => boolean;
 }
 
 /**

package/components/buttonbulkaction/ButtonBulkAction.vue.d.ts

@@ -52,6 +52,13 @@ export interface ButtonBulkActionProps {
    * @options dropdown overlay-panel
    */
   selectMenuType?: 'dropdown' | 'overlay-panel';
+  /**
+   * Specify the name/label for selected data.
+   *
+   * @example 'Asset(s)' will be displayed as '3 Asset(s) Selected'
+   * @default 'Data' for all packages
+   */
+  naming?: string;
 }
 
 export interface ButtonBulkActionSlots {

package/components/buttonselecttree/ButtonSelectTree.vue.d.ts

@@ -1,3 +1,4 @@
+import { Slot } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { TreeNode } from '../basetree/BaseTree.vue.d';
 import { ShortFetchResponse } from '../datatable/DataTable.vue.d';
@@ -98,7 +99,7 @@ export interface ButtonSelectTreeProps {
    */
   disableNodeAll?: boolean;
   /**
-   * For checkbox selection, old behavior is preventing select if there is no node selected.
+   * Old behavior is preventing select if there is no node selected.
    *
    * This props comes to make options, wether the selection can be empty or not.
    * @default true
@@ -168,6 +169,10 @@ export type ButtonSelectTreeEmits = {
   'reset': [];
 };
 
+export interface ButtonSelectTreeSlots {
+  treenode: Slot<{ node: TreeNode }>;
+}
+
 /**
  * **TSVue v2 - ButtonSelectTree**
  *
@@ -180,8 +185,8 @@ export type ButtonSelectTreeEmits = {
  */
 declare class ButtonSelectTree extends ClassComponent<
   ButtonSelectTreeProps,
-  unknown,
-  ButtonSelectTreeProps
+  ButtonSelectTreeSlots,
+  ButtonSelectTreeEmits
 > {}
 
 declare module '@vue/runtime-core' {

package/components/datatable/DataTable.vue.d.ts

@@ -4,6 +4,23 @@ import { ClassComponent, HintedString } from '../ts-helpers.d';
 import { Component } from 'vue';
 import { DateOptions } from 'lib/utils/date.util';
 
+export interface DataTableLocaleConfig {
+  /**
+   * Message to display on loading ovevrlay while downloading
+   */
+  downloadingMessage: string;
+
+  /**
+   * Text when booleanValue is true
+   */
+  trueText: string;
+
+  /**
+   * Text when booleanValue is false
+   */
+  falseText: string;
+}
+
 export type ChildGroup = {
   groupHeader: string;
   groupItems: Data[];
@@ -151,8 +168,8 @@ export type TogglePresetConfirmDialogProps = Omit<
   showWhen?:
     | 'active'
     | 'inactive'
-    | ((data: any) => boolean)
-    | ((data: any) => Promise<boolean>);
+    | ((data: any, state: boolean) => boolean)
+    | ((data: any, state: boolean) => Promise<boolean>);
 };
 
 interface ColumnConfirmActionPresetBase {
@@ -600,6 +617,8 @@ export interface BaseDataTableProps {
   totalDisabledRows?: number;
   /**
    * Specify the error message download excel
+   *
+   * @example 'Error, failed to download {fileName}' - fileName will be replaced
    */
   excelToastErrorMessage?: string;
   /**

package/components/dialogconfirm/DialogConfirm.vue.d.ts

@@ -31,6 +31,13 @@ export interface DialogConfirmProps {
    * The severity will determine the dialog icons and color scheme.
    */
   severity: ConfirmDialogSeverity;
+  /**
+   * The severity of the confirm button.
+   * The severity will determine the confirm button color scheme in case button severity is different from header/dialog severity.
+   *
+   * @default undefined - to fallback to props.severity
+   */
+  confirmButtonSeverity?: ConfirmDialogSeverity;
   /**
    * The boolean modelValue to show dialog.
    */

package/components/dialogselecttree/DialogSelectTree.vue.d.ts

@@ -1,13 +1,17 @@
 import { TreeSelectionKeys } from 'primevue/tree';
 import { TreeNode } from '../basetree/BaseTree.vue.d';
-import { ShortFetchResponse } from '../datatable/DataTable.vue.d';
+import { QueryParams, ShortFetchResponse } from '../datatable/DataTable.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import TreeInstance from '../tree/Tree.vue.d';
+import TreeInstance, { TreeProps } from '../tree/Tree.vue.d';
+import { Slot } from 'vue';
 
-export interface DialogSelectTreeProps {
+export interface DialogSelectTreeProps
+  extends Omit<TreeProps, 'type' | 'filter'> {
   fetchTree?: (
     type: 'group' | 'category',
+    params?: QueryParams,
   ) => Promise<ShortFetchResponse<TreeNode> | undefined>;
+  params?: QueryParams;
   visible?: boolean;
   type?: 'group' | 'category';
   /**
@@ -19,7 +23,7 @@ export interface DialogSelectTreeProps {
   subHeader?: string;
   selectionMode?: 'single' | 'checkbox';
   /**
-   * For checkbox selection, current behavior is preventing select if there is no node selected.
+   * Current behavior is preventing select if there is no node selected.
    *
    * @default true
    */
@@ -73,6 +77,8 @@ export interface DialogSelectTreeProps {
    * Render hidden dialog to trigger fetch tree
    */
   hidden?: boolean;
+
+  propagateSelection?: boolean;
 }
 
 export type TreeSelectPayload = {
@@ -86,6 +92,25 @@ export type DialogSelectTreeEmits = {
   hide: [];
 };
 
+export interface DialogSelectTreeSlots {
+  header: Slot<{
+    dialogHeader: string;
+    subHeader?: string;
+    lists?: (string | object)[];
+    listLabel?: string;
+    isLoading: boolean;
+    filter: string;
+    updateFilter: (newFilter?: string) => void; // Hooks to update internal state filter
+  }>;
+
+  /**
+   * Slot to customize tree node item
+   */
+  treenode: Slot<{ node: TreeNode; checked: boolean; disabled: boolean }>;
+
+  footer: Slot;
+}
+
 /**
  * **TSVue v2 - DialogSelectTree**
  *
@@ -96,7 +121,7 @@ export type DialogSelectTreeEmits = {
  */
 declare class DialogSelectTree extends ClassComponent<
   DialogSelectTreeProps,
-  Record<string, unknown>,
+  DialogSelectTreeSlots,
   DialogSelectTreeEmits
 > {
   treeComponent: TreeInstance;

package/components/filtercontainer/FilterContainer.vue.d.ts

@@ -14,8 +14,8 @@ export interface MultiSelectFilterField extends MultiSelectProps {
   optionField?: string; // @example - actionOptions
   params?: QueryParams; // Additional QueryParams for the fetchOptionFn
   fetchOptionFn?:
-    | ((args?: any) => MultiSelectOption[]) // Sync function to fetch options
-    | ((args?: any) => Promise<MultiSelectOption[]>); // Async function
+    | ((args?: any) => MultiSelectOption[] | undefined) // Sync function to fetch options
+    | ((args?: any) => Promise<MultiSelectOption[] | undefined>); // Async function
 }
 
 export interface DropdownFilterField extends DropdownProps {
@@ -24,8 +24,8 @@ export interface DropdownFilterField extends DropdownProps {
   optionField?: string; // @example - actionOptions
   params?: QueryParams; // Additional QueryParams for the fetchOptionFn
   fetchOptionFn?:
-    | ((args?: any) => MultiSelectOption[]) // Sync function to fetch options
-    | ((args?: any) => Promise<MultiSelectOption[]>); // Async function
+    | ((args?: any) => MultiSelectOption[] | undefined) // Sync function to fetch options
+    | ((args?: any) => Promise<MultiSelectOption[]> | undefined); // Async function
 }
 
 export interface RangeNumberFilterField extends InputRangeNumberProps {

package/components/icon/Icon.vue.d.ts

@@ -32,6 +32,7 @@ export type WangsIcons =
   | 'assignment'
   | 'attachment-2'
   | 'audit'
+  | 'barcode'
   | 'barricade-line'
   | 'bell'
   | 'bell-alert'
@@ -51,6 +52,7 @@ export type WangsIcons =
   | 'checkbox-circle'
   | 'checkbox-circle-fill'
   | 'checkbox-blank-circle'
+  | 'checkbox-blank-circle-fill'
   | 'checkbox-multiple'
   | 'close'
   | 'close-circle'
@@ -75,6 +77,7 @@ export type WangsIcons =
   | 'error'
   | 'error-fill'
   | 'exchange'
+  | 'expired'
   | 'extension-borrow'
   | 'eye'
   | 'eye-off'
@@ -143,6 +146,7 @@ export type WangsIcons =
   | 'profile'
   | 'qr'
   | 'qr-scan'
+  | 'reception'
   | 'refresh'
   | 'replace-tag'
   | 'report-tag'
@@ -162,6 +166,7 @@ export type WangsIcons =
   | 'sort-asc'
   | 'sort-desc'
   | 'supplier-return'
+  | 'internal-return'
   | 'spinner'
   | 'stack'
   | 'star'

package/components/imagecompressor/ImageCompressor.vue.d.ts

@@ -1,6 +1,32 @@
 import { CustomValidation } from '../form/Form.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export interface ImageCompressorLocaleConfig {
+  cropDialogHeader: string;
+  /**
+   * @example 'Gunakan Ctrl + Scroll untuk perbesar atau perkecil gambar'
+   */
+  cropperCtrlScrollInfo: string;
+  /**
+   * @example 'Gunakan dua jari untuk untuk perbesar atau perkecil gambar'
+   */
+  cropperTwoFingerInfo: string;
+
+  /**
+   * @example 'Maks. 1 MB'
+   */
+  maxSizeRequirement: string;
+
+  /**
+   * @example 'Hanya mendukung format gambar'
+   */
+  imageTypeRequirement: string;
+
+  cancelCropLabel: string;
+  changeImageLabel: string;
+  applyCropLabel: string;
+}
+
 export type Image = {
   src: string | null;
   type: string | null;
@@ -14,7 +40,7 @@ export type ImageCompressorPayload = {
     fileName: string;
     file: File;
     size: string;
-    type: 'image/webp';
+    type: 'image/webp' | 'image/jpeg' | 'image/jpg';
   };
   message?: string;
 };
@@ -130,6 +156,12 @@ export interface ImageCompressorProps {
    * @default true
    */
   showValidatorMessage?: boolean;
+  /**
+   * Specify the file type for the uploaded image result.
+   *
+   * @default 'webp'
+   */
+  fileType?: 'webp' | 'jpeg' | 'jpg';
 }
 
 export interface ImageCompressorSlots {

package/components/tabmenu/TabMenu.vue.d.ts

@@ -181,7 +181,7 @@ export interface TabMenuProps {
   activeIndex?: number | undefined;
   /**
    * Whether to use trailing line at the end of tab menu.
-   * @defaultValue true
+   * @defaultValue true - when type is tab, otherwise true
    */
   useTrailingLine?: boolean | undefined;
   /**

package/components/tree/Tree.vue.d.ts

@@ -3,7 +3,7 @@ import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { TreeSelectionKeys } from 'primevue/tree';
 import { MenuItem } from 'lib/components/menuitem';
 import { BaseTreeProps, TreeNode } from '../basetree/BaseTree.vue.d';
-import { ShortFetchResponse } from '../datatable/DataTable.vue.d';
+import { QueryParams, ShortFetchResponse } from '../datatable/DataTable.vue.d';
 
 export interface TreeProps extends BaseTreeProps {
   /**
@@ -13,7 +13,9 @@ export interface TreeProps extends BaseTreeProps {
   type: 'group' | 'category';
   fetchTree?: (
     type: 'group' | 'category',
+    params?: QueryParams,
   ) => Promise<ShortFetchResponse<TreeNode> | undefined>;
+  params?: QueryParams;
   selectedKeys?: TreeSelectionKeys | number[] | undefined;
   selectedTreeNodes?: TreeNode[] | undefined;
   selectionMode?: 'single' | 'checkbox' | undefined;
@@ -85,7 +87,7 @@ export type TreeEmits = {
 };
 
 export interface TreeSlots {
-  default: Slot<{ node: TreeNode }>;
+  default: Slot<{ node: TreeNode; checked: boolean; disabled: boolean }>;
 }
 
 /**

package/components/ts-helpers.d.ts

@@ -61,3 +61,23 @@ export declare type DefaultPassThrough<T = void> =
   | undefined;
 
 export declare type HintedString<T extends string> = (string & {}) | T;
+
+export declare type PresetAttributes = {
+  class?: any;
+  style?: any;
+  [key: string]: any;
+};
+
+export declare type PresetMethodOptions = {
+  instance: any;
+  props: any;
+  state: any;
+  context: any;
+  attrs: any;
+  parent: any;
+  global: object | undefined;
+};
+
+export declare type PresetOptionMethodType<Opt = PresetMethodOptions> = (
+  options: Partial<Opt>,
+) => PresetAttributes;

package/components/username/UserName.vue.d.ts

@@ -1,39 +1,97 @@
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  PresetAttributes,
+  PresetOptionMethodType,
+} from '../ts-helpers';
 
-/**
- * Defines valid properties in UserName component.
- */
-export interface UserNameProps {
+export interface UserNamePresetOptions {
+  root: PresetAttributes;
+  displayname: PresetOptionMethodType;
+  panel: {
+    background: PresetAttributes;
+    username: PresetAttributes;
+    useremail: PresetAttributes;
+    positiondivision: PresetAttributes;
+    userdetaillink: PresetAttributes;
+    contentwrapper: PresetAttributes;
+    detailwrapper: PresetAttributes;
+  };
+}
+
+export interface UserNameLocaleConfig {
   /**
-   * @default 'picture' - Show user profile picture instead of user icon
+   * The anchor text for user detail link on user panel
    */
-  type?: 'icon' | 'picture';
+  detailUserAnchorText?: string;
+}
+
+export interface UserNameComponentConfigs {
   /**
-   * The full user Object
+   * @example `/tim-member/member/{userId}/detail-member`
+   */
+  detailUserPath: string;
+
+  /**
+   * @default 'picture' - Show user profile picture instead of user icon
    */
-  user?: Record<string, any>;
+  type?: 'icon' | 'picture';
+
   /**
    * Specify the field of user to be used as display name
    *
    * @example 'name.fullName'
-   *
-   * @default 'nickName'
    */
   userNameField?: string;
   /**
    * Specify the field of user to be used as display picture
    *
    * @example 'image.profile'
-   *
-   * @default 'profilePicture'
    */
   profilePictureField?: string;
+
+  /**
+   * Function to get user detail on panel shown
+   * @param userId The user id
+   * @returns Full user detail object
+   */
+  getUserDetail: (
+    userId: string,
+  ) => UserNameProps['user'] | Promise<UserNameProps['user']>;
+}
+
+export interface GeneralUser {
+  _id: string;
+  profilePicture?: string;
+  firstName?: string;
+  lastName?: string;
+  fullName?: string;
+  email?: string;
+  nickName?: string;
+  position?: string;
+  division?: string;
+  [key: string]: any;
+}
+
+/**
+ * Defines valid properties in UserName component.
+ */
+export interface UserNameProps extends Partial<UserNameComponentConfigs> {
+  /**
+   * The full user Object
+   */
+  user?: GeneralUser;
   /**
    * Specify if the component can be emptyable
    *
    * @default false
    */
   emptyable?: boolean;
+
+  /**
+   * When it sets to false, the props.user will be used
+   */
+  fetchDetailOnPanelShow?: boolean;
 }
 
 /**

package/loading-table-Bdr9ZhtP.js

@@ -0,0 +1 @@
+System.register([],function(A,u){"use strict";return{execute:function(){const t=A("default","data:application/octet-stream;base64,UEsDBBQAAAAIANdZblpui9GOWwAAAGYAAAANAAAAbWFuaWZlc3QuanNvbqtWKkstKs7Mz1OyUjJS0lFKT81LLUosyS8C8h1S8kty8ktKMlP14SzdrGIHAz1LPQPdpNSSRD1DY6CexLzM3MQSoBnFSlbR1UqZKUC9vomZeQrByUDTlGpjawFQSwMEFAAAAAgA11luWthEVP/TAgAAWhYAABEAAABhL01haW4gU2NlbmUuanNvbu2YS2vbQBSF/4qZ9cSd0cOytWpL0qwChUA3wQvVHsci8gNJfQSj/95zR4+RZZWmcozACJJ4mMe598y982FyYNsN89lDEG5Hjwu1VYyz5XLJfMHZmvlSTDH4hcHMwmCj0oD5B/aMIx+jXZqGahVGKvmwiFWQ7uKRHDvOWLCMsyh4VXHC/KcDS1+Z7/A80O0udRAiiSGJj1QH2u2Zb08wCDGgwIi/CqJEmVy+4zCtBMlDkLxUy8FOT78g0IHp1PCHJhD4xpo6fGZxMYfwb8RDVuU+xKYtB4bzB4ZFMbZtmzNkKrAtrGYnE0/PFoefXMHxIwWJInnLzfj/i3gux08lYs9IpEXddbMi9wmdRMY1fxQC13WeHSkdi7uO0JfU2U+uIioVY6ipbxxZOIsmqBsqykSxkuNa0pRO6hyvlnuWx9NqlYLGlJQZbV8He2Vanz3H6PiygU1rb7ZY+3T7+W70TS3o8dzHux97bNUP5S6Kwn2iRhITWpqzhb43rNNzwSxClyFU9LYQj5Ta6GZUqDeDfQ3StY4ICQQs26t4UHkVKQm79pSKRQk+4LeqLl2STm31xtTu42C/DhdI7ksY0RmdGY11RotGLmMhXY+LseOJCT5sR1pFbCfvLORftkx+BhXMN7gmuZRK0+CGsVknRmkTInkrVPfQeJYmicb1FTz6V//rp95o/zLvv1rysmyum3BLlSvt1aBrXxF0pfce0NW31KLueBeHrrCOoNjNT65Sg25lqKlvHPUH3a4eT8yVgsbUAN0Buv1DF9In0LWuCLr6W8+ZzLVQulbm4jvVhZk7E0dI7ORGaxjgGjcNceOmP952MthSqFLPeBpwO+C2f9zqBm3glq7wWnCLzWfjVqJA7bgVl8atNz0iYjc3pGFwa9w0xI2b/nDbyWBLoSrcVp4G3A647R+3Do1+wp079vD/Xc5WCERgJcJOcS8FYIMkUSn16Tz7A1BLAQIUABQAAAAIANdZblpui9GOWwAAAGYAAAANAAAAAAAAAAAAAAAAAAAAAABtYW5pZmVzdC5qc29uUEsBAhQAFAAAAAgA11luWthEVP/TAgAAWhYAABEAAAAAAAAAAAAAAAAAhgAAAGEvTWFpbiBTY2VuZS5qc29uUEsFBgAAAAACAAIAegAAAIgDAAAAAA==")}}});

package/loading-table-D9bw9OcI.js

@@ -0,0 +1,4 @@
+const A = "data:application/octet-stream;base64,UEsDBBQAAAAIANdZblpui9GOWwAAAGYAAAANAAAAbWFuaWZlc3QuanNvbqtWKkstKs7Mz1OyUjJS0lFKT81LLUosyS8C8h1S8kty8ktKMlP14SzdrGIHAz1LPQPdpNSSRD1DY6CexLzM3MQSoBnFSlbR1UqZKUC9vomZeQrByUDTlGpjawFQSwMEFAAAAAgA11luWthEVP/TAgAAWhYAABEAAABhL01haW4gU2NlbmUuanNvbu2YS2vbQBSF/4qZ9cSd0cOytWpL0qwChUA3wQvVHsci8gNJfQSj/95zR4+RZZWmcozACJJ4mMe598y982FyYNsN89lDEG5Hjwu1VYyz5XLJfMHZmvlSTDH4hcHMwmCj0oD5B/aMIx+jXZqGahVGKvmwiFWQ7uKRHDvOWLCMsyh4VXHC/KcDS1+Z7/A80O0udRAiiSGJj1QH2u2Zb08wCDGgwIi/CqJEmVy+4zCtBMlDkLxUy8FOT78g0IHp1PCHJhD4xpo6fGZxMYfwb8RDVuU+xKYtB4bzB4ZFMbZtmzNkKrAtrGYnE0/PFoefXMHxIwWJInnLzfj/i3gux08lYs9IpEXddbMi9wmdRMY1fxQC13WeHSkdi7uO0JfU2U+uIioVY6ipbxxZOIsmqBsqykSxkuNa0pRO6hyvlnuWx9NqlYLGlJQZbV8He2Vanz3H6PiygU1rb7ZY+3T7+W70TS3o8dzHux97bNUP5S6Kwn2iRhITWpqzhb43rNNzwSxClyFU9LYQj5Ta6GZUqDeDfQ3StY4ICQQs26t4UHkVKQm79pSKRQk+4LeqLl2STm31xtTu42C/DhdI7ksY0RmdGY11RotGLmMhXY+LseOJCT5sR1pFbCfvLORftkx+BhXMN7gmuZRK0+CGsVknRmkTInkrVPfQeJYmicb1FTz6V//rp95o/zLvv1rysmyum3BLlSvt1aBrXxF0pfce0NW31KLueBeHrrCOoNjNT65Sg25lqKlvHPUH3a4eT8yVgsbUAN0Buv1DF9In0LWuCLr6W8+ZzLVQulbm4jvVhZk7E0dI7ORGaxjgGjcNceOmP952MthSqFLPeBpwO+C2f9zqBm3glq7wWnCLzWfjVqJA7bgVl8atNz0iYjc3pGFwa9w0xI2b/nDbyWBLoSrcVp4G3A647R+3Do1+wp079vD/Xc5WCERgJcJOcS8FYIMkUSn16Tz7A1BLAQIUABQAAAAIANdZblpui9GOWwAAAGYAAAANAAAAAAAAAAAAAAAAAAAAAABtYW5pZmVzdC5qc29uUEsBAhQAFAAAAAgA11luWthEVP/TAgAAWhYAABEAAAAAAAAAAAAAAAAAhgAAAGEvTWFpbiBTY2VuZS5qc29uUEsFBgAAAAACAAIAegAAAIgDAAAAAA==";
+export {
+  A as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewangsit/wangsvue",
-  "version": "1.5.206-alpha.0",
+  "version": "1.5.206",
   "author": "fewangsit",
   "description": "Wangsit VueJS Component Library",
   "module": "./wangsvue.es.js",

package/plugins/WangsVue.d.ts

@@ -24,8 +24,10 @@ import { MenuLocaleConfig } from '../components/menu/Menu.vue.d';
 import { ButtonBulkActionLocaleConfig, ButtonBulkActionProps } from '../components/buttonbulkaction/ButtonBulkAction.vue.d';
 import { AnimationDefaultConfig } from '../components/animation/Animation.vue.d';
 import { LoadingPresetOptions } from '../components/loading/Loading.vue.d';
-import { DataTableProps } from '../components/datatable/DataTable.vue.d';
+import { DataTableLocaleConfig, DataTableProps } from '../components/datatable/DataTable.vue.d';
 import { BadgeComponentConfigs } from '../components/badge/Badge.vue.d';
+import { UserNameComponentConfigs, UserNameLocaleConfig, UserNamePresetOptions } from '../components/username/UserName.vue.d';
+import { ImageCompressorLocaleConfig } from '../components/imagecompressor/ImageCompressor.vue.d';
 /**
  * A Record of component names with theirs props interface
  */
@@ -40,6 +42,7 @@ export interface ComponentDefaultPropsConfig {
     Animation?: AnimationDefaultConfig;
     DataTable?: Partial<DataTableProps>;
     Badge?: Partial<BadgeComponentConfigs>;
+    UserName?: UserNameComponentConfigs;
 }
 interface ComponentLocaleConfig {
     FieldWrapper?: FieldWrapperLocaleConfig;
@@ -59,6 +62,9 @@ interface ComponentLocaleConfig {
     Calendar?: CalendarLocaleConfig;
     Menu?: MenuLocaleConfig;
     ButtonBulkAction?: ButtonBulkActionLocaleConfig;
+    UserName?: UserNameLocaleConfig;
+    DataTable?: DataTableLocaleConfig;
+    ImageCompressor?: ImageCompressorLocaleConfig;
 }
 export interface LocaleConfig {
     global: Partial<PrimeVueLocaleOptions>;
@@ -68,6 +74,7 @@ export interface ComponentPresetOptions {
     calendar: CalendarPresetOptions;
     overlaypanel: OverlayPanelPassThroughOptions;
     loading: LoadingPresetOptions;
+    username: UserNamePresetOptions;
     [key: string]: any;
 }
 export type WangsVueComponentConfig<ComponentName extends keyof ComponentDefaultPropsConfig | keyof ComponentLocaleConfig> = {