@fewangsit/wangsvue 1.5.205-alpha.1 → 1.5.206-alpha.0

package/components/badge/Badge.vue.d.ts

@@ -1,9 +1,19 @@
 import { ClassComponent } from '../ts-helpers';
 
+export interface BadgeComponentConfigs {
+  /**
+   * The component configurasion to set the severity based on given label. If provided, props.severity might be omitted.
+   *
+   * @param label The badge label
+   * @returns The matched severity of given label
+   */
+  getSeverity?: (label?: string) => BadgeProps['severity'];
+}
+
 /**
  * Props for Badge component
  */
-export interface BadgeProps {
+export interface BadgeProps extends BadgeComponentConfigs {
   /**
    * The text to be displayed.
    */
@@ -13,9 +23,9 @@ export interface BadgeProps {
    */
   editable?: boolean;
   /**
-   * Sets the severity level for styling purposes.
+   * Sets the severity level for styling purposes. This prop might be omitted if getSeverity is provided.
    */
-  severity?: 'success' | 'danger' | 'warning' | 'dark' | 'primary';
+  severity?: 'success' | 'info' | 'danger' | 'warning' | 'dark' | 'primary';
   /**
    * Specifies the format for text truncation rules based on the usage context.
    */

package/components/badgegroup/BadgeGroup.vue.d.ts

@@ -1,9 +1,26 @@
+import { Slot } from 'vue';
 import { BadgeProps } from 'lib/components/badge/Badge.vue.d';
-import { ClassComponent } from '../ts-helpers.d';
+import { ClassComponent, HintedString } from '../ts-helpers.d';
+
+export type ObjectBadge = {
+  text: string;
+  severity: 'success' | 'danger' | 'warning' | 'dark' | 'primary';
+};
 
 export interface BadgeGroupProps
   extends Omit<BadgeProps, 'label' | 'disabled' | 'removable'> {
-  labels: string[];
+  /**
+   * Support data type object to determine severity for specific text
+   */
+  labels: string[] | ObjectBadge[];
+  /**
+   * Determine whether severity of text "more" is customizable
+   *
+   * @default undefined
+   */
+  textMoreSeverity?: HintedString<
+    'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'contrast'
+  >;
   /**
    * The text shown on the more button
    *
@@ -25,8 +42,15 @@ export interface BadgeGroupProps
   emptyable?: boolean;
 }
 
+export interface BadgeGroupSlots {
+  /**
+   * Slot for custom more dialog content
+   */
+  dialogcontent: Slot<{ labels: string[] }>;
+}
+
 export default class Badge extends ClassComponent<
   BadgeGroupProps,
-  unknown,
+  BadgeGroupSlots,
   unknown
 > {}

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

@@ -300,6 +300,8 @@ export interface TreeContext {
  */
 export interface BaseTreeProps {
   disableKeys?: number[];
+  disableNodeAll?: boolean;
+  exactDisableKeys?: number[];
   level?: number;
   /**
    * List of labels that has no menu option

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

@@ -1,6 +1,25 @@
 import { DefineComponent } from 'vue';
 import { MenuItem } from '../menuitem';
 
+export interface ButtonBulkActionLocaleConfig {
+  /**
+   * @example `{length} data selected`
+   */
+  currentSelectionMessage?: string;
+
+  /**
+   * @description Label for when all records have been selected.
+   * @example 'Select all ({totalRecords} data)' - totalRecords - The total number of records available to select.
+   */
+  allRecordSelected?: string;
+
+  /**
+   * @description Label for the "Select All" option in a bulk action button.
+   * @example `Select all ({totalRecords} items)` - totalRecords - The total number of records available to select.
+   */
+  selectAllRecords?: string;
+}
+
 export interface ButtonBulkActionProps {
   /**
    * Disable the button.

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

@@ -80,7 +80,14 @@ export interface ButtonSelectTreeProps {
    * @default false
    */
   autoSelectAll?: boolean;
+  /**
+   * A list of node keys that should be disabled along with their children.
+   */
   disableKeys?: number[];
+  /**
+   * A list of node keys that should be disabled, affecting only the specified nodes and not their children.
+   */
+  exactDisableKeys?: number[];
   /**
    * Disable the Select button
    */

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

@@ -2,6 +2,7 @@ import { DialogConfirmProps } from 'lib/components/dialogconfirm/DialogConfirm.v
 import { MenuItem } from 'lib/components/menuitem';
 import { ClassComponent, HintedString } from '../ts-helpers.d';
 import { Component } from 'vue';
+import { DateOptions } from 'lib/utils/date.util';
 
 export type ChildGroup = {
   groupHeader: string;
@@ -13,9 +14,7 @@ export type Data = Record<string, any> & {
   hasChildren?: boolean;
 };
 
-export type QueryParams = {
-  [key: string]: any;
-};
+export type QueryParams = Partial<Record<string, any>>;
 
 /**
  * Custom sort event.
@@ -298,6 +297,13 @@ export interface TableColumn {
    * Convert boolean into text Yes/No
    */
   booleanValue?: boolean;
+  /**
+   * Specify the options for formatting date values using the formatDate utility.
+   *
+   * The date format primarily uses the general settings configurations.
+   * Within this property, you only need to set the `showTime` or `showDate` options.
+   */
+  dateFormatOptions?: DateOptions;
   bodyTemplate?: (data: any, index: number) => string | undefined;
   bodyComponent?: (data: any, index: number) => TableCellComponent;
   headerTemplate?: () => string;
@@ -521,6 +527,7 @@ export interface BaseDataTableProps {
    * Sets to lazy if you need to dynamically shows data.
    */
   lazy?: boolean;
+  // Sets loading animation for DataTable that's not lazy.
   loading?: boolean;
   /**
    * Whether to enable 'checkbox' | 'single' selection.

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

@@ -41,8 +41,18 @@ export interface DialogSelectTreeProps {
    * Disable node 'All' selection
    */
   disableNodeAll?: boolean;
-  disableKeys?: number[];
+  /**
+   * @deprecated
+   */
   exactDisableKey?: number;
+  /**
+   * A list of node keys that should be disabled along with their children.
+   */
+  disableKeys?: number[];
+  /**
+   * A list of node keys that should be disabled, affecting only the specified nodes and not their children.
+   */
+  exactDisableKeys?: number[];
   /**
    * Defines the tree is readonly and disabled.
    */

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

@@ -11,7 +11,8 @@ import { ButtonSelectTreeProps } from '../buttonselecttree/ButtonSelectTree.vue.
 export interface MultiSelectFilterField extends MultiSelectProps {
   type: 'multiselect';
   field: string; // The name of the field this filter applies to
-  optionField: string; // @example - actionOptions
+  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
@@ -21,6 +22,7 @@ export interface DropdownFilterField extends DropdownProps {
   type: 'dropdown';
   field: string; // The name of the field this filter applies to
   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

package/components/form/Form.vue.d.ts

@@ -41,6 +41,7 @@ export type FieldValidation<T = FieldValue | undefined> =
       setErrors?: (errors?: string | string[]) => void;
       handleReset?: () => void;
       validate?: () => void;
+      setValue?: (value: any, shouldValidate?: boolean) => void;
     }
   | (Omit<FieldContext, 'value'> & {
       value: T;
@@ -263,6 +264,11 @@ declare class Form extends ClassComponent<FormProps, FormSlots, FormEmits> {
    */
   submit: (e?: Event | undefined) => Promise<void | undefined>;
 
+  /**
+   * Callback invoked on Button Submit clicked
+   */
+  onSubmitClicked: () => void;
+
   /**
    * Exposed function to set the outer fields wrapper height.
    */

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

@@ -1,3 +1,5 @@
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
 export type WangsIconseverities =
   | 'danger'
   | 'info'
@@ -44,6 +46,7 @@ export type WangsIcons =
   | 'chat-check'
   | 'change-tag'
   | 'check'
+  | 'checkout'
   | 'check-double-fill'
   | 'checkbox-circle'
   | 'checkbox-circle-fill'
@@ -158,6 +161,7 @@ export type WangsIcons =
   | 'smartphone'
   | 'sort-asc'
   | 'sort-desc'
+  | 'supplier-return'
   | 'spinner'
   | 'stack'
   | 'star'
@@ -226,3 +230,16 @@ export interface IconProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   class?: any;
 }
+
+/**
+ * Display icon with svg backrgounds
+ */
+declare class Icon extends ClassComponent<IconProps, unknown, unknown> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Icon: GlobalComponentConstructor<Icon>;
+  }
+}
+
+export default Icon;

package/components/menuitem/index.d.ts

@@ -69,6 +69,11 @@ export interface MenuItem {
    * @defaultValue true
    */
   visible?: boolean | ((...args: any) => boolean) | undefined;
+  /**
+   * A boolean or to specify if the item has danger severity.
+   * @defaultValue false
+   */
+  danger?: boolean | undefined;
   /**
    * Defines the item as a separator.
    * @defaultValue false

package/components/quickfilter/QuickFilter.vue.d.ts

@@ -1,16 +1,25 @@
 import { DefineComponent } from 'vue';
 import { FilterField } from '../filtercontainer/FilterContainer.vue.d';
+import { QueryParams } from '../datatable/DataTable.vue.d';
 
 export interface QuickFilterProps {
   fields: FilterField[];
   tableName?: string;
 }
 
+export type QuickFilterEmits = {
+  apply: [filter: QueryParams];
+};
+
 /**
  * **WangsVue - QuickFilter**
  *
  * @group components
  */
-declare const QuickFilter: DefineComponent<QuickFilterProps, unknown, unknown>;
+declare const QuickFilter: DefineComponent<
+  QuickFilterProps,
+  QuickFilterEmits,
+  unknown
+>;
 
 export default QuickFilter;

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

@@ -44,8 +44,14 @@ export interface TreeProps extends BaseTreeProps {
    * @default false - (-1) is excluded
    */
   includeNodeAllKey?: boolean;
+  /**
+   * A list of node keys that should be disabled along with their children.
+   */
   disableKeys?: number[];
-  exactDisableKey?: number;
+  /**
+   * A list of node keys that should be disabled, affecting only the specified nodes and not their children.
+   */
+  exactDisableKeys?: number[];
   /**
    * Defines the tree is readonly and disabled.
    */
@@ -62,6 +68,12 @@ export interface TreeProps extends BaseTreeProps {
    * Defines the group tree to disable excluded keys
    */
   excludedKeys?: number[];
+  /**
+   * Will emit update selection when value is `true`
+   *
+   * @default false - to prevent auto emit in every possible unhandled way
+   */
+  shouldEmitEventOnChange?: boolean;
 }
 
 export type TreeEmits = {

package/package.json

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

package/plugins/WangsVue.d.ts

@@ -21,10 +21,11 @@ import { InputURLProps } from '../components/inputurl/InputURL.vue.d';
 import { InputEmailProps } from '../components/inputemail/InputEmail.vue.d';
 import { ImageProps } from '../components/image/Image.vue.d';
 import { MenuLocaleConfig } from '../components/menu/Menu.vue.d';
-import { ButtonBulkActionProps } from '../components/buttonbulkaction/ButtonBulkAction.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 { BadgeComponentConfigs } from '../components/badge/Badge.vue.d';
 /**
  * A Record of component names with theirs props interface
  */
@@ -38,6 +39,7 @@ export interface ComponentDefaultPropsConfig {
     ButtonBulkAction?: Omit<ButtonBulkActionProps, 'selectedData' | 'options'>;
     Animation?: AnimationDefaultConfig;
     DataTable?: Partial<DataTableProps>;
+    Badge?: Partial<BadgeComponentConfigs>;
 }
 interface ComponentLocaleConfig {
     FieldWrapper?: FieldWrapperLocaleConfig;
@@ -56,6 +58,7 @@ interface ComponentLocaleConfig {
     InputNumber?: InputNumberLocaleConfig;
     Calendar?: CalendarLocaleConfig;
     Menu?: MenuLocaleConfig;
+    ButtonBulkAction?: ButtonBulkActionLocaleConfig;
 }
 export interface LocaleConfig {
     global: Partial<PrimeVueLocaleOptions>;