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

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/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';
@@ -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

@@ -9,6 +9,16 @@ 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 = {
@@ -158,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 {
@@ -311,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;
@@ -502,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;
   /**
@@ -599,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[];
   /**

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';
   /**
@@ -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

@@ -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

@@ -7,10 +7,29 @@ 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?:
@@ -20,7 +39,14 @@ export interface MultiSelectFilterField extends MultiSelectProps {
 
 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?:
@@ -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' {

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

@@ -42,6 +42,7 @@ export type WangsIcons =
   | 'building-4'
   | 'calculator'
   | 'calendar'
+  | 'calendar-event'
   | 'calendar-todo'
   | 'chat'
   | 'chat-check'
@@ -130,6 +131,7 @@ export type WangsIcons =
   | 'menu-unfold'
   | 'minus'
   | 'money-cny-box'
+  | 'money-dollar-circle'
   | 'more'
   | 'move-to'
   | 'nfc'

package/components/index.d.ts

@@ -8,6 +8,7 @@ export { default as BaseTree } from '.././components/basetree/BaseTree.vue';
 export { default as Breadcrumb } from './breadcrumb/Breadcrumb.vue';
 export { default as Button } from './button/Button.vue';
 export { default as ButtonBulkAction } from './buttonbulkaction/ButtonBulkAction.vue';
+export { default as ButtonCopy } from './buttoncopy/ButtonCopy.vue';
 export { default as ButtonDownload } from './buttondownload/ButtonDownload.vue';
 export { default as ButtonFilter } from './buttonfilter/ButtonFilter.vue';
 export { default as ButtonImportExcel } from './buttonImportExcel/ButtonImportExcel.vue';

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 '../../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;
@@ -52,14 +54,6 @@ export interface TreeProps extends BaseTreeProps {
    * A list of node keys that should be disabled, affecting only the specified nodes and not their children.
    */
   exactDisableKeys?: number[];
-
-  /**
-   * A function to determine when the node should be disabled
-   *
-   * @return true to disabled
-   */
-  disableNodeWhen?: (node: TreeNode) => boolean;
-
   /**
    * Defines the tree is readonly and disabled.
    */
@@ -93,7 +87,7 @@ export type TreeEmits = {
 };
 
 export interface TreeSlots {
-  default: Slot<{ node: TreeNode }>;
+  default: Slot<{ node: TreeNode; checked: boolean; disabled: boolean }>;
 }
 
 /**

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

@@ -81,12 +81,6 @@ 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

package/event-bus/index.d.ts

@@ -24,6 +24,9 @@ export type Events<CustomEvents = Record<string, any>> = CustomEvents & {
         };
     };
     'data-table:update': TableEvent;
+    'data-table:updated': TableEvent & {
+        data: Data[];
+    };
     'data-table:download': TableEvent & {
         fileName: string;
         multiTableNames?: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewangsit/wangsvue-gsts",
-  "version": "1.0.0-alpha.19",
+  "version": "1.0.0-alpha.20",
   "author": "Wangsit FE Developer",
   "description": "Global Settings Tagsamurai VueJS Component Library",
   "type": "module",

package/plugins/WangsVue.d.ts

@@ -8,7 +8,7 @@ import { CustomColumnLocaleConfig } from '../components/customcolumn/CustomColum
 import { ButtonSearchLocaleConfig } from '../components/buttonsearch/ButtonSearch.vue.d';
 import { FilterContainerLocaleConfig } from '../components/filtercontainer/FilterContainer.vue.d';
 import { MultiSelectLocaleConfig } from '../components/multiselect/MultiSelect.vue.d';
-import { DropdownLocaleConfig } from '../components/dropdown/Dropdown.vue.d';
+import { DropdownLocaleConfig, DropdownProps } from '../components/dropdown/Dropdown.vue.d';
 import { InputCurrencyLocaleConfig } from '../components/inputcurrency/InputCurrency.vue.d';
 import { TextareaLocaleConfig } from '../components/textarea/Textarea.vue.d';
 import { InputrangeNumberLocaleConfig } from '../components/inputrangenumber/InputRangeNumber.vue.d';
@@ -43,6 +43,7 @@ export interface ComponentDefaultPropsConfig {
     DataTable?: Partial<DataTableProps>;
     Badge?: Partial<BadgeComponentConfigs>;
     UserName?: UserNameComponentConfigs;
+    Dropdown?: DropdownProps;
 }
 interface ComponentLocaleConfig {
     FieldWrapper?: FieldWrapperLocaleConfig;