@fewangsit/wangsvue-fats 1.0.0-alpha.98 → 1.0.0-rc.1

package/components/assetinfo/AssetInfo.vue.d.ts

@@ -22,6 +22,11 @@ export interface AssetInfoProps {
    * @default true
    */
   useNfc?: boolean;
+
+  /**
+   * @default true
+   */
+  useTagType?: boolean;
 }
 
 declare class AssetInfo extends ClassComponent<

package/components/buttondownload/ButtonDownload.vue.d.ts

@@ -1,5 +1,23 @@
+import { DataTableProps } from '../datatable/DataTable.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';
 
+export interface ButtonDownloadLocaleConfig {
+  /**
+   * 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 interface ButtonDownloadProps {
   fileName: string;
   /**
@@ -21,6 +39,19 @@ export interface ButtonDownloadProps {
    * Texts below table in downloaded excel
    */
   additionalTextBelowTable?: (string | string[])[];
+  /**
+   * If this props exist, download data from provided configs instead syncing with data tables
+   */
+  dataConfigs?: Pick<
+    DataTableProps,
+    'columns' | 'fetchFunction' | 'data' | 'tableTitle'
+  >[];
+  /**
+   * Specify the error message download excel when tableConfigs is in use
+   *
+   * @example 'Error, failed to download {fileName}' - fileName will be replaced
+   */
+  excelToastErrorMessage?: string;
 }
 
 /**

package/components/carousel/Carousel.vue.d.ts

@@ -0,0 +1,28 @@
+import { ImageGallery } from '../image/Image.vue.d';
+import { ClassComponent } from '../ts-helpers';
+
+export interface CarouselProps {
+  /**
+   * An array of image object to be displayed.
+   */
+  value: ImageGallery[] | undefined;
+}
+
+/**
+ * **TSVue v2 - Carousel**
+ *
+ * _Carousel is a component for displaying a collection of images or content in a sliding or rotating fashion.
+ * You can navigate through the items using the provided next and previous functions._
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group components
+ */
+declare class Carousel extends ClassComponent<
+  CarouselProps,
+  unknown,
+  unknown
+> {}
+
+export default Carousel;

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

@@ -4,6 +4,7 @@ import { DialogConfirmProps } from '../../components/dialogconfirm/DialogConfirm
 import { MenuItem } from '../../components/menuitem';
 import { DateOptions } from '../../utils/date.util';
 
+import { WangsIconseverities } from '../icon/Icon.vue.d';
 import { ClassComponent, HintedString } from '../ts-helpers.d';
 
 export interface DataTableLocaleConfig {
@@ -249,6 +250,7 @@ export interface TableColumn {
   field: string;
   fieldType?: 'string' | 'number' | 'boolean' | 'array';
   info?: string;
+  infoSeverity?: WangsIconseverities;
   editable?: boolean;
   /**
    * If the column is editable, only allow number inputs.

package/components/datepicker/DatePicker.vue.d.ts

@@ -0,0 +1,52 @@
+import { DefineComponent } from 'vue';
+
+/**
+ * DatePicker component props
+ */
+export interface DatePickerProps {
+  /**
+   * DatePicker modelValue is day index from 0
+   */
+  modelValue?: number[];
+  /**
+   * DatePicker initialValue is day index from 0
+   */
+  initialValue?: number[];
+  /**
+   * Display label on top of Date Input.
+   */
+  label?: string;
+  /**
+   * Enable Validator using vee-validate. Combine with Form that handle form validation.
+   */
+  useValidator?: boolean;
+  /**
+   * When used as field in From Validation using Form,
+   * specify the unique field name, match with your needs for API request.
+   */
+  fieldName?: string;
+  /**
+   * Whether this field should be filled or not.
+   */
+  mandatory?: boolean;
+  /**
+   * Sets the invalid state.
+   */
+  invalid?: boolean;
+  /**
+   * Set the custom validator message.
+   * By default each field has preserved with its validator message, you don't need to worrying about the message.
+   */
+  errorMessage?: { empty: string };
+}
+
+/**
+ * DatePicker component emits
+ */
+export type DatePickerEmits = {
+  'update:modelValue': [days?: number[]];
+};
+
+declare const DatePicker: DefineComponent<DatePickerProps, DatePickerEmits>;
+
+export default DatePicker;

package/components/daypicker/DayPicker.vue.d.ts

@@ -0,0 +1,52 @@
+import { DefineComponent } from 'vue';
+
+/**
+ * DayPicker component props
+ */
+export interface DayPickerProps {
+  /**
+   * DayPicker modelValue is day index from 0
+   */
+  modelValue?: number[];
+  /**
+   * DayPicker initialValue is day index from 0
+   */
+  initialValue?: number[];
+  /**
+   * Display label on top of Date Input.
+   */
+  label?: string;
+  /**
+   * Enable Validator using vee-validate. Combine with Form that handle form validation.
+   */
+  useValidator?: boolean;
+  /**
+   * When used as field in From Validation using Form,
+   * specify the unique field name, match with your needs for API request.
+   */
+  fieldName?: string;
+  /**
+   * Whether this field should be filled or not.
+   */
+  mandatory?: boolean;
+  /**
+   * Sets the invalid state.
+   */
+  invalid?: boolean;
+  /**
+   * Set the custom validator message.
+   * By default each field has preserved with its validator message, you don't need to worrying about the message.
+   */
+  errorMessage?: { empty: string };
+}
+
+/**
+ * DayPicker component emits
+ */
+export type DayPickerEmits = {
+  'update:modelValue': [days?: number[]];
+};
+
+declare const DayPicker: DefineComponent<DayPickerProps, DayPickerEmits>;
+
+export default DayPicker;

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

@@ -3,7 +3,7 @@ import { Slot } from 'vue';
 import { WangsIcons } from '../icon/Icon.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-type ConfirmDialogSeverity = 'success' | 'danger';
+type ConfirmDialogSeverity = 'success' | 'danger' | 'primary';
 
 export interface DialogConfirmLocaleConfig {
   actionableCloseButtonLabel?: string;

package/components/dialogtransferlog/DialogTransferLog.vue.d.ts

@@ -0,0 +1,16 @@
+import { ClassComponent } from '../../components/ts-helpers.d';
+
+// You need to provide requestIds with Ref<string[]> to enable prev and next buttons
+
+export interface DialogTransferLogProps {
+  id: string;
+  visible?: boolean;
+}
+
+declare class DialogTransferLog extends ClassComponent<
+  DialogTransferLogProps,
+  unknown,
+  unknown
+> {}
+
+export default DialogTransferLog;

package/components/dropdown/Dropdown.vue.d.ts

@@ -249,6 +249,11 @@ export type DropdownEmits = {
    * Emits when overlay shown.
    */
   'show': [];
+
+  /**
+   * Emits when the Field Info icon is clicked.
+   */
+  'fieldInfoClick': [];
 };
 
 /**

package/components/fieldwrapper/FieldWrapper.vue.d.ts

@@ -76,4 +76,11 @@ declare class FieldWrapper extends ClassComponent<
   unknown
 > {}
 
+export type FieldWrapperEmits = {
+  /**
+   * Emitted when the information (tooltip) is clicked.
+   */
+  infoClick: [];
+};
+
 export default FieldWrapper;

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

@@ -1,3 +1,4 @@
+import { AxiosResponse } from 'axios';
 import { DefineComponent, Slot } from 'vue';
 
 import {
@@ -10,6 +11,7 @@ import { CalendarProps } from '../calendar/Calendar.vue.d';
 import { QueryParams } from '../datatable/DataTable.vue.d';
 import { InputRangeNumberProps } from '../inputrangenumber/InputRangeNumber.vue.d';
 import { MultiSelectProps } from '../multiselect/MultiSelect.vue.d';
+import { StringKeyOf, TypeError } from '../ts-helpers';
 
 export type FilterMatchMode =
   | 'CONTAINS'
@@ -23,66 +25,76 @@ export type FilterMatchMode =
   | 'BETWEEN'
   | 'DATE_BETWEEN';
 
-// More specific filter field types
-export interface MultiSelectFilterField extends MultiSelectProps {
-  type: 'multiselect';
+type BaseSelectField<OptionsQueryParams extends QueryParams> = {
   /**
-   * The name of the field this filter applies to.
+   * Represents a function type for fetching options based on query parameters.
    *
-   * 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) => Option[] | undefined) // Sync function to fetch options
-    | ((args?: any) => Promise<Option[] | undefined>); // Async function
-}
-
-export interface DropdownFilterField extends DropdownProps {
-  type: 'dropdown';
-  /**
-   * The name of the field this filter applies to.
+   * @template T - The type of query parameters, extending `QueryParams`. Defaults to `any`.
    *
-   * 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) => Option[] | undefined) // Sync function to fetch options
-    | ((args?: any) => Promise<Option[]> | undefined); // Async function
-}
-
-export interface RangeNumberFilterField extends InputRangeNumberProps {
-  type: 'rangenumber';
-  /**
-   * Specify min and max field
+   * This function can have one of the following signatures:
+   * - A synchronous function that takes query parameters and returns an array of `Option` objects.
+   * - An asynchronous function that takes query parameters and returns a `Promise` resolving to an array of `Option` objects.
+   * - An asynchronous function that takes query parameters and returns a `Promise` resolving to an `AxiosResponse` containing a `FetchOptionResponse` object.
    *
-   * @example ['minAge', 'maxAge']
+   * @param args - The query parameters of type `T` used to fetch the options.
+   * @returns One of the following:
+   * - An array of `Option` objects.
+   * - A `Promise` resolving to an array of `Option` objects.
+   * - A `Promise` resolving to an `AxiosResponse` containing a `FetchOptionResponse` object.
    */
-  fields?: string[];
+  fetchOptionFn?(
+    args: OptionsQueryParams,
+  ): Option[] | Promise<Option[]> | Promise<AxiosResponse<FetchOptionResponse>>;
 
-  /**
-   * 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;
+  optionField?: keyof OptionsQueryParams; // @example - actionOptions
+  params?: OptionsQueryParams; // Additional QueryParams for the fetchOptionFn
+};
+
+export interface MultiSelectFilterField<OptionsQueryParams extends QueryParams>
+  extends BaseSelectField<OptionsQueryParams>,
+    MultiSelectProps {
+  type: 'multiselect';
+}
+
+export interface DropdownFilterField<OptionsQueryParams extends QueryParams>
+  extends BaseSelectField<OptionsQueryParams>,
+    DropdownProps {
+  type: 'dropdown';
 }
 
-export interface ButtonSelectTreeFilterField
-  extends Omit<ButtonSelectTreeProps, 'type' | 'label' | 'fieldLabel'> {
+type RangeNumberFilterField<Field extends string> =
+  | (InputRangeNumberProps & {
+      type: 'rangenumber';
+      /**
+       * Specify min and max field
+       *
+       * @example ['minAge', 'maxAge']
+       */
+      fields: [Field, Field];
+      field?: TypeError<'`field` must not be specified when using `fields` property'>;
+      tooltip?: string;
+    })
+  | (InputRangeNumberProps & {
+      type: 'rangenumber';
+      /**
+       * Specify single field for both min and max input.
+       * The value will be a number array.
+       *
+       * Prefer using this property when working with Static Filtering
+       *
+       * @example value: [1000, 5000] or equivalent to 'value.0': 1000 & 'value.1': 5000
+       */
+      field: Field;
+      fields?: TypeError<'`fields` must not be specified when using `field` property'>;
+      tooltip?: string;
+    });
+
+export interface ButtonSelectTreeFilterField<
+  Field extends string,
+  Params = QueryParams,
+> extends Omit<ButtonSelectTreeProps, 'type' | 'label' | 'fieldLabel'> {
   type: 'group' | 'category';
-  field: string; // The name of the field this filter applies to
+  field: Field; // The name of the field this filter applies to
   /**
    * The field label.
    */
@@ -92,22 +104,46 @@ export interface ButtonSelectTreeFilterField
    * @default to Select Group|Category
    */
   buttonLabel?: string;
-  params?: QueryParams; // Override QueryParams for the fetchTree
+  params?: Params; // Override QueryParams for the fetchTree
 }
 
 export interface CalendarFilterField extends CalendarProps {
   type: 'calendar';
-  field: string;
 }
 
-export type AdditionalFilterField = ButtonSelectTreeFilterField;
+export type AdditionalFilterField<Field extends string = string> =
+  ButtonSelectTreeFilterField<Field>;
 
-export type FilterField =
-  | AdditionalFilterField
-  | MultiSelectFilterField
-  | DropdownFilterField
-  | RangeNumberFilterField
-  | CalendarFilterField;
+export type BaseFilterField<Params extends QueryParams = QueryParams> = {
+  /**
+   * Filter field visibility
+   *
+   * You dont need manually filter, this component already handle it.
+   */
+  visible?: boolean;
+  /**
+   * 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: keyof Params;
+};
+
+export type FilterField<
+  Params extends QueryParams = QueryParams,
+  OptionsQueryParams extends QueryParams = QueryParams,
+> =
+  | (BaseFilterField<Params> &
+      (
+        | AdditionalFilterField<StringKeyOf<Params>>
+        | MultiSelectFilterField<OptionsQueryParams>
+        | DropdownFilterField<OptionsQueryParams>
+        | CalendarFilterField
+      ))
+  | (Omit<BaseFilterField<Params>, 'field'> &
+      RangeNumberFilterField<StringKeyOf<Params>>);
 
 export type FilterOptions<Opt = Record<string, boolean>> = Record<
   keyof Opt,
@@ -150,11 +186,6 @@ export interface FilterContainerProps {
  * Slots for FilterContainer component
  */
 export type FilterContainerSlots = {
-  /**
-   * @deprecated Please use props.fields instead
-   */
-  default: Slot;
-
   /**
    * Additional template for field.
    */

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

@@ -306,6 +306,8 @@ declare class Form extends ClassComponent<FormProps, FormSlots, FormEmits> {
    * The form values
    */
   values: GenericObject;
+
+  isSubmitClicked: boolean;
 }
 
 declare module '@vue/runtime-core' {

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

@@ -133,6 +133,7 @@ export type WangsIcons =
   | 'map-pin'
   | 'menu'
   | 'menu-unfold'
+  | 'mind-map'
   | 'minus'
   | 'money-cny-box'
   | 'money-dollar-circle'

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

@@ -168,6 +168,10 @@ export interface ImageCompressorProps {
    * @default 'webp'
    */
   fileType?: 'webp' | 'jpeg' | 'jpg';
+  /**
+   * @default normal
+   */
+  type?: 'inline-table' | 'normal';
 }
 
 export interface ImageCompressorSlots {
@@ -184,6 +188,10 @@ export type ImageCompressorEmits = {
    */
   'applyProp': [];
   'update:defaultImage': [index?: number];
+  /**
+   * Emits on every changes in `field.value`
+   */
+  'update:fieldValue': [value?: File[] | File];
   /**
    * On delete button clicked.
    *

package/components/index.d.ts

@@ -17,7 +17,9 @@ export { default as ButtonSync } from './buttonsync/ButtonSync.vue';
 export { default as ButtonToggle } from './buttontoggle/ButtonToggle.vue';
 export { default as Calendar } from './calendar/Calendar.vue';
 export { default as Card } from './card/Card.vue';
+export { default as Carousel } from './carousel/Carousel.vue';
 export { default as Checkbox } from './checkbox/Checkbox.vue';
+export { default as CustomColumn } from './customcolumn/CustomColumn.vue';
 export { default as DataTable } from './datatable/DataTable.vue';
 export { default as Dialog } from './dialog/Dialog.vue';
 export { default as DialogConfirm } from './dialogconfirm/DialogConfirm.vue';
@@ -34,6 +36,7 @@ export { default as InputBadge } from './inputbadge/InputBadge.vue';
 export { default as InputCurrency } from './inputcurrency/InputCurrency.vue';
 export { default as InputEmail } from './inputemail/InputEmail.vue';
 export { default as InputNumber } from './inputnumber/InputNumber.vue';
+export { default as InputOtp } from './inputotp/InputOtp.vue';
 export { default as InputPassword } from './inputpassword/InputPassword.vue';
 export { default as InputPhoneNumber } from './inputphonenumber/InputPhoneNumber.vue';
 export { default as InputRangeNumber } from './inputrangenumber/InputRangeNumber.vue';
@@ -55,6 +58,7 @@ export { default as Toast } from './toast/Toast.vue';
 export { default as ToggleSwitch } from './toggleswitch/ToggleSwitch.vue';
 export { default as Tree } from './tree/Tree.vue';
 export { default as UserName } from './username/UserName.vue';
+export { default as ValidatorMessage } from './validatormessage/ValidatorMessage.vue';
 
 export { default as AssetInfo } from './assetinfo/AssetInfo.vue';
 export { default as ButtonAddByScan } from './buttonaddbyscan/ButtonAddByScan.vue';
@@ -66,8 +70,14 @@ export { default as UserWithIcon } from './userwithicon/UserWithIcon.vue';
 export { default as FilterContainer } from './filtercontainer/FilterContainer.vue';
 export { default as InputSearch } from './inputsearch/InputSearch.vue';
 export { default as TransactionRoles } from './transactionroles/TransactionRoles.vue';
+export { default as DatePicker } from './datepicker/DatePicker.vue';
+export { default as DayPicker } from './daypicker/DayPicker.vue';
 export { default as DialogPrintQR } from './dialogprintqr/DialogPrintQR.vue';
 export { default as DialogAssetNameDetail } from './dialogassetnamedetail/DialogAssetNameDetail.vue';
 export { default as DialogReportTag } from './dialogreporttag/DialogReportTag.vue';
 export { default as DialogReportDamage } from './dialogreportdamage/DialogReportDamage.vue';
 export { default as DialogReportMissing } from './dialogreportmissing/DialogReportMissing.vue';
+export { default as DialogTransferLog } from './dialogtransferlog/DialogTransferLog.vue';
+export { default as DialogDamageLog } from './dialogdamagelog/DialogDamageLog.vue';
+export { default as DisposalReport } from './disposalreport/DisposalReport.vue';
+export { default as Steps } from './steps/Steps.vue';

package/components/inputotp/InputOtp.vue.d.ts

@@ -0,0 +1,3 @@
+import { WangsInputOtp } from '@wangs-ui/vue';
+
+export default WangsInputOtp;

package/components/steps/Steps.vue.d.ts

@@ -0,0 +1,20 @@
+import { ClassComponent } from '../../components/ts-helpers.d';
+
+export type Step = {
+  label: string;
+};
+
+export interface StepsProps {
+  /**
+   * List of step object or label.
+   */
+  steps: Step[] | string[] | (string | Step)[];
+  /**
+   * The current active step start from 1.
+   */
+  currentStep: number;
+}
+
+declare class Steps extends ClassComponent<StepsProps, unknown, unknown> {}
+
+export default Steps;

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

@@ -9,8 +9,8 @@
  */
 
 import { TabMenuProps as WangsUITabMenuProps } from '@wangs-ui/core';
+import { MenuItem } from '@wangs-ui/core/dist/types/components/menuitem/menuitem.type';
 
-import { MenuItem } from '../menuitem';
 import { ClassComponent } from '../ts-helpers';
 
 /**
@@ -58,7 +58,7 @@ export interface TabMenuProps extends WangsUITabMenuProps {
    * Defines type of TabMenu.
    * @defaultValue 'tab'
    */
-  type?: 'tab' | 'pill';
+  type?: 'tab' | 'pill' | 'segmented';
   /**
    * Active index of menuitem.
    * @defaultValue 0

package/components/ts-helpers.d.ts

@@ -81,3 +81,11 @@ export declare type PresetMethodOptions = {
 export declare type PresetOptionMethodType<Opt = PresetMethodOptions> = (
   options: Partial<Opt>,
 ) => PresetAttributes;
+
+export type StringKeyOf<T> = Extract<keyof T, string>;
+
+declare const TypeException: unique symbol;
+
+export type TypeError<T extends string> = {
+  [TypeException]: T;
+};

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

@@ -30,7 +30,7 @@ export interface UserNameComponentConfigs {
   /**
    * @example `/tim-member/member/{userId}/detail-member`
    */
-  detailUserPath: string;
+  detailUserPath?: string;
 
   /**
    * @default 'picture' - Show user profile picture instead of user icon
@@ -42,6 +42,11 @@ export interface UserNameComponentConfigs {
    * @default true
    */
   showUserName?: boolean;
+  /**
+   * Whether to shorten the user's name..
+   * @default true
+   */
+  formatUserName?: boolean;
   /**
    * Specify the field of user to be used as display name
    *
@@ -60,7 +65,7 @@ export interface UserNameComponentConfigs {
    * @param userId The user id
    * @returns Full user detail object
    */
-  getUserDetail: (
+  getUserDetail?: (
     userId: string,
   ) => UserNameProps['user'] | Promise<UserNameProps['user']>;
 }

package/components/validatormessage/ValidatorMessage.vue.d.ts

@@ -0,0 +1,12 @@
+import { DefineComponent } from 'vue';
+
+export interface ValidatorMessageProps {
+  /**
+   * Shows validator message if message exist.
+   */
+  message?: string;
+}
+
+declare const ValidatorMessage: DefineComponent<ValidatorMessageProps>;
+
+export default ValidatorMessage;