@fewangsit/wangsvue-gsts 1.0.0-alpha.2 → 1.0.0-alpha.20

package/components/animation/Animation.vue.d.ts

@@ -1,4 +1,4 @@
-import { ClassComponent } from 'lib/components/ts-helpers.d';
+import { ClassComponent } from '../../components/ts-helpers.d';
 
 export interface AnimationDefaultConfig {
   libPath: 'supplyasset' | 'workspace' | 'admin';

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

@@ -1,4 +1,5 @@
-import { ClassComponent } from '../ts-helpers';
+import { ClassComponent } from '../.././components/ts-helpers';
+
 
 export interface BadgeComponentConfigs {
   /**
@@ -25,7 +26,15 @@ export interface BadgeProps extends BadgeComponentConfigs {
   /**
    * Sets the severity level for styling purposes. This prop might be omitted if getSeverity is provided.
    */
-  severity?: 'success' | 'info' | 'danger' | 'warning' | 'dark' | 'primary';
+  severity?:
+    | 'success'
+    | 'info'
+    | 'danger'
+    | 'warning'
+    | 'dark'
+    | 'primary'
+    | 'fixed-primary'
+    | 'supply-primary';
   /**
    * Specifies the format for text truncation rules based on the usage context.
    */

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

@@ -1,10 +1,18 @@
 import { Slot } from 'vue';
-import { BadgeProps } from 'lib/components/badge/Badge.vue.d';
-import { ClassComponent, HintedString } from '../ts-helpers.d';
+import { BadgeProps } from '../.././components/badge/Badge.vue.d';
+import { ClassComponent, HintedString } from '../.././components/ts-helpers';
+
 
 export type ObjectBadge = {
   text: string;
-  severity: 'success' | 'danger' | 'warning' | 'dark' | 'primary';
+  severity:
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'dark'
+    | 'primary'
+    | 'fixed-primary'
+    | 'supply-primary';
 };
 
 export interface BadgeGroupProps
@@ -19,7 +27,14 @@ export interface BadgeGroupProps
    * @default undefined
    */
   textMoreSeverity?: HintedString<
-    'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'contrast'
+    | 'secondary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'contrast'
+    | 'fixed-primary'
+    | 'supply-primary'
   >;
   /**
    * The text shown on the more button

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/button/Button.vue.d.ts

@@ -1,8 +1,9 @@
 import { ButtonHTMLAttributes, VNode } from 'vue';
-import { WangsIcons } from '../icon/Icon.vue.d';
 import { TooltipOptions } from 'primevue/tooltip';
-import { GlobalComponentConstructor } from '../ts-helpers.d';
-import { ClassComponent, HintedString } from '../ts-helpers';
+import { GlobalComponentConstructor } from '../.././components/ts-helpers.d';
+import { ClassComponent, HintedString } from '../.././components/ts-helpers';
+import { WangsIcons } from '../.././components/icon/Icon.vue.d';
+
 
 /**
  * Defines valid properties in Button component.
@@ -55,7 +56,14 @@ export interface ButtonProps extends /* @vue-ignore */ ButtonHTMLAttributes {
    */
   badgeSeverity?:
     | HintedString<
-        'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'contrast'
+        | 'secondary'
+        | 'info'
+        | 'success'
+        | 'warning'
+        | 'danger'
+        | 'contrast'
+        | 'fixed-primary'
+        | 'supply-primary'
       >
     | null
     | undefined;

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/buttoncopy/ButtonCopy.vue.d.ts

@@ -0,0 +1,26 @@
+import { DefineComponent } from 'vue';
+
+export interface ButtonCopyProps {
+  /**
+   * Text to be copied.
+   */
+  text: string;
+}
+
+/**
+ * **WangsVue - ButtonCopy**
+ *
+ * _ButtonCopy is a component for copying text to the clipboard._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group buttons
+ */
+declare const ButtonCopy: DefineComponent<
+  ButtonCopyProps,
+  Record<string, unknown>,
+  Record<string, unknown>
+>;
+
+export default ButtonCopy;

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/calendar/BaseCalendar.vue.d.ts

@@ -18,6 +18,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     stepHour: number;
     stepMinute: number;
     timeSeparator: string;
+    exactSelection: boolean;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (date: Date | Date[]) => void;
     "update:epochTimeMillis": (millis?: number | number[]) => void;
@@ -37,6 +38,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     stepHour: number;
     stepMinute: number;
     timeSeparator: string;
+    exactSelection: boolean;
 }>>> & {
     "onUpdate:modelValue"?: (date: Date | Date[]) => any;
     "onUpdate:epochTimeMillis"?: (millis?: number | number[]) => any;
@@ -48,14 +50,15 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     showOptionalText: boolean;
     mode: "range" | "single";
     view: "date" | "month" | "year" | undefined;
-    valueFormat: "date" | "millis";
     selectionMode: "range" | "single";
+    valueFormat: "date" | "millis";
     hideOnRangeSelection: boolean | undefined;
     showYear: boolean;
     hourFormat: "12" | "24" | undefined;
     timeSeparator: string | undefined;
     stepHour: number | undefined;
     stepMinute: number | undefined;
+    exactSelection: boolean;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/components/calendar/Calendar.vue.d.ts

@@ -495,6 +495,15 @@ export interface CalendarProps {
    * @todo Support number, currently only support 'current'
    */
   maxMonth?: 'current' | number | undefined;
+  /**
+   * When using range selection mode, selecting only the "start date" (without an "end date") will, by default, return a range ending 24 hours later.
+   * Enabling this prop will instead return the exact dates selected, without adding an extra day.
+   *
+   * @example Selecting dates from the 1st to the 5th will return an array of epoch timestamps for each day: [1st, 2nd, 3rd, 4th, 5th].
+   * @default false
+   * @requires selectionMode = 'range'
+   */
+  exactSelection?: boolean;
 }
 
 /**

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

@@ -1,8 +1,25 @@
-import { DialogConfirmProps } from 'lib/components/dialogconfirm/DialogConfirm.vue.d';
-import { MenuItem } from 'lib/components/menuitem';
+import { DialogConfirmProps } from '../../components/dialogconfirm/DialogConfirm.vue.d';
+import { MenuItem } from '../../components/menuitem';
 import { ClassComponent, HintedString } from '../ts-helpers.d';
 import { Component } from 'vue';
-import { DateOptions } from 'lib/utils/date.util';
+import { DateOptions } from '../../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;
@@ -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 {
@@ -304,6 +321,12 @@ export interface TableColumn {
    * Within this property, you only need to set the `showTime` or `showDate` options.
    */
   dateFormatOptions?: DateOptions;
+  /**
+   * Set the fallback text when the cell value is empty. Used in export excel.
+   *
+   * @example 'N/A'
+   */
+  emptyText?: string;
   bodyTemplate?: (data: any, index: number) => string | undefined;
   bodyComponent?: (data: any, index: number) => TableCellComponent;
   headerTemplate?: () => string;
@@ -495,10 +518,13 @@ export interface BaseDataTableProps {
   disableAllRows?: boolean;
   /**
    * The query search from ButtonSearch component.
+   *
+   * @deprecated - not fully supported, may not works properly
    */
   search?: string;
   /**
    * Tag query for search by scan
+   * @deprecated - not fully supported, may not works properly
    */
   tag?: string;
   /**
@@ -592,6 +618,8 @@ export interface BaseDataTableProps {
   reorderable?: boolean;
   /**
    * An array of fields as string to use in global filtering.
+   *
+   * @default undefined - All fields are used
    */
   globalFilterFields?: string[];
   /**
@@ -600,6 +628,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

@@ -1,6 +1,8 @@
+import { WangsIcons } from '../.././components/icon/Icon.vue.d';
+import { ClassComponent } from '../.././components/ts-helpers';
+import { GlobalComponentConstructor } from '../.././components/ts-helpers.d';
 import { Slot } from 'vue';
-import { WangsIcons } from '../icon/Icon.vue.d';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
 
 type ConfirmDialogSeverity = 'success' | 'danger';
 
@@ -31,6 +33,16 @@ 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
+    | 'fixed-primary'
+    | 'supply-primary';
   /**
    * 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/dropdown/Dropdown.vue.d.ts

@@ -1,8 +1,8 @@
 import { Slot } from 'vue';
-import { DropdownOption, OptionValue } from 'lib/types/options.type';
+import { DropdownOption, OptionValue } from '../../types/options.type';
 import { CustomValidation } from '../form/Form.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import { BadgeProps } from 'lib/components/badge/Badge.vue.d';
+import { BadgeProps } from '../../components/badge/Badge.vue.d';
 
 /**
  * Configuration interface for localizing dropdown component placeholders and error messages.
@@ -79,6 +79,13 @@ export interface DropdownProps {
    */
   options?: DropdownOption[] | string[] | Record<string, any>;
 
+  /**
+   * Allows `null` to be treated as a valid selectable option in the dropdown.
+   *
+   * When enabled, `null` can be included in the options list and selected by the user.
+   */
+  allowNullOption?: boolean;
+
   /**
    * Specify the property name of option to be used as label.
    *

package/components/fileupload/FileUpload.vue.d.ts

@@ -24,6 +24,18 @@ export type FileUploadProps = {
    * Maximum file size allowed in bytes.
    */
   maxFileSize?: number | undefined;
+  /**
+   * Sets the initial value of the field.
+   * This will only available with option 'useValidator'.
+   * If you use this prop, it is not recommended to use 'v-model' to avoid unexpected behavior.
+   */
+  value?: File | File[];
+
+  /**
+   * V-model for the file upload component.
+   */
+  modelValue?: File | File[];
+
   /**
    * Props to determine whether file upload support multiple files or not
    *
@@ -116,14 +128,22 @@ export type FileUploadProps = {
 };
 
 export type FileUploadEmits = {
+  /**
+   * Callback to invoke when there is a file selected.
+   */
+  'select': [event: File | File[]];
+  /**
+   * Callback to invoke when model changed.
+   */
+  'update:modelValue': [event: File | File[]];
   /**
    * Callback to invoke when file upload is complete.
    */
-  upload: [event: FileUploadUploadEvent];
+  'upload': [event: FileUploadUploadEvent];
   /**
    * Callback to invoke if file upload fails.
    */
-  error: [event: FileUploadErrorEvent | InputErrorCodes];
+  'error': [event: FileUploadErrorEvent | InputErrorCodes];
 };
 
 /**

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

@@ -1,4 +1,4 @@
-import { MultiSelectOption } from 'lib/types/options.type';
+import { MultiSelectOption } from '../../types/options.type';
 import { DefineComponent, Slot } from 'vue';
 import { CalendarProps } from '../calendar/Calendar.vue.d';
 import { QueryParams } from '../datatable/DataTable.vue.d';
@@ -7,25 +7,51 @@ import { InputRangeNumberProps } from '../inputrangenumber/InputRangeNumber.vue.
 import { MultiSelectProps } from '../multiselect/MultiSelect.vue.d';
 import { ButtonSelectTreeProps } from '../buttonselecttree/ButtonSelectTree.vue.d';
 
+export type FilterMatchMode =
+  | 'CONTAINS'
+  | 'EQUALS'
+  | 'NOT_EQUALS'
+  | 'IN'
+  | 'LESS_THAN'
+  | 'LESS_THAN_OR_EQUAL_TO'
+  | 'GREATER_THAN'
+  | 'GREATER_THAN_OR_EQUAL_TO'
+  | 'BETWEEN'
+  | 'DATE_BETWEEN';
+
 // More specific filter field types
 export interface MultiSelectFilterField extends MultiSelectProps {
   type: 'multiselect';
-  field: string; // The name of the field this filter applies to
+  /**
+   * The name of the field this filter applies to.
+   *
+   * When using a static filter, it also specifies the field in the data to be used for generating unique options.
+   * For example, if filtering by a user's full name, the field could be 'user.fullName', which will extract
+   * unique full names from the table data and use them as filter options.
+   */
+  field: string;
   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 {
   type: 'dropdown';
-  field: string; // The name of the field this filter applies to
+  /**
+   * The name of the field this filter applies to.
+   *
+   * When using a static filter, it also specifies the field in the data to be used for generating unique options.
+   * For example, if filtering by a user's full name, the field could be 'user.fullName', which will extract
+   * unique full names from the table data and use them as filter options.
+   */
+  field: string;
   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 {
@@ -35,7 +61,17 @@ export interface RangeNumberFilterField extends InputRangeNumberProps {
    *
    * @example ['minAge', 'maxAge']
    */
-  fields: string[];
+  fields?: string[];
+
+  /**
+   * Specify single field for both min and max input.
+   * The value will be a number array.
+   *
+   * Prever use this property when you are working with Static Filtering
+   *
+   * @example value: [1000,5000] or equal to 'value.0': 1000 & 'value.1': 5000
+   */
+  field?: string;
   tooltip?: string;
 }
 
@@ -99,6 +135,10 @@ export interface FilterContainerProps {
    */
   fieldsPerRow?: number;
   fields: FilterField[];
+  /**
+   * Enable static filtering
+   */
+  static?: boolean;
 }
 
 /**
@@ -113,7 +153,7 @@ export type FilterContainerSlots = {
   /**
    * Additional template for field.
    */
-  field: Slot<{ field: AdditionalFilterField }>;
+  field: Slot<{ field: AdditionalFilterField; fieldName: string }>;
 };
 
 export type FilterContainerEmits = {

package/components/filtercontainer/helpers/applyFilter.helper.d.ts

@@ -1,3 +1,5 @@
 import { GenericObject } from 'vee-validate';
+import { FilterField } from '../FilterContainer.vue.d';
 declare const applyFilter: (values: GenericObject, tableName: string, emit?: (...args: any[]) => any) => void;
+export declare const applyStaticFilter: (values: GenericObject, tableName: string, fields: FilterField[], emit?: (...args: any[]) => any) => void;
 export default applyFilter;

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

@@ -295,6 +295,11 @@ declare class Form extends ClassComponent<FormProps, FormSlots, FormEmits> {
    * }
    */
   setErrors(fields: GenericObject): void;
+
+  /**
+   * The form values
+   */
+  values: GenericObject;
 }
 
 declare module '@vue/runtime-core' {