@fewangsit/wangsvue-fats 1.0.0-alpha.12 → 1.0.0-alpha.121

package/components/dialogform/DialogForm.vue.d.ts

@@ -1,5 +1,6 @@
 import { GenericObject } from 'vee-validate';
 import { Slot } from 'vue';
+
 import FormInstance, { FormPayload, FormProps } from '../form/Form.vue.d';
 import { WangsIcons } from '../icon/Icon.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
@@ -85,7 +86,7 @@ export interface DialogFormProps extends FormProps {
    * @default 260
    */
   asideRightWidth?: number;
-  class?: string | string[];
+  class?: string | string[] | object[];
 
   /**
    * Custom button cancel label.
@@ -117,7 +118,7 @@ export interface DialogFormProps extends FormProps {
   /**
    * @deprecated
    */
-  contentClass?: string | string[];
+  contentClass?: string | string[] | object[];
 
   /**
    * Show Date time on header.

package/components/dialoglinkedasset/DialogLinkedAsset.vue.d.ts

@@ -0,0 +1,106 @@
+import { DefineComponent } from 'vue';
+import { AssetName } from '@tagsamurai/fats-api-services/src/types/oldAssetService.type';
+
+import { DialogConfirmProps } from '../../../../library/components/dialogconfirm/DialogConfirm.vue.d';
+import { WangsIcons } from '../../../../library/components/icon/Icon.vue.d';
+
+/**
+ * Type of the asset data, it refers to data response from Asset API, but since this component only using asset's name and _id then only those field are required for type.
+ */
+export type LinkedAsset = {
+  _id: string;
+  name: AssetName;
+};
+
+/**
+ * Type of linked asset, it contains parent and its child(s).
+ */
+export type LinkedAssetFamily = {
+  parent: LinkedAsset;
+  children: LinkedAsset[];
+};
+
+export type ChildAsset = {
+  parent: LinkedAsset;
+  children: LinkedAsset[]; // Empty children
+  family: LinkedAsset[];
+};
+
+export type ParentAsset = {
+  parent: undefined; // If the asset is parent, the parent will undefined
+  children: LinkedAsset[];
+  family: LinkedAsset[]; // Family is combination of parent, children and asset itself.
+  // If it only contains one asset in family, it means the asset has not linked yet.
+};
+
+export type FamilyData = (ParentAsset | ChildAsset) & {
+  _id: string;
+};
+
+/**
+ * Props for DialogSelectAsset component
+ */
+export interface DialogLinkedAssetProps extends DialogConfirmProps {
+  /**
+   * The header of the dialog.
+   */
+  header: string;
+  /**
+   * The list of selected asset to be transacted.
+   */
+  list?: LinkedAsset[];
+  /**
+   * The list of selected asset to be transacted.
+   *
+   * @deprecated - no longer supported, use `list` instead
+   */
+  lists?: LinkedAsset[];
+  /**
+   * The label of the dialog button.
+   */
+  label?: string;
+  /**
+   * The body text of the dialog.
+   */
+  confirmBody?: string;
+  /**
+   * Specify the custom header icon.
+   * If not, the default rules by it severity.
+   *
+   * @default 'success' > hidden;
+   * @default 'danger' > 'error';
+   */
+  headerIcon?: WangsIcons;
+  /**
+   * @default - 'confirmation'
+   */
+  type?: 'detail' | 'confirmation';
+}
+
+/**
+ * Emits for DialogSelectAsset component
+ */
+export type DialogLinkedAssetEmit = {
+  /**
+   * Emits when button confirm clicked.
+   */
+  'confirm': [families: LinkedAssetFamily[]];
+  /**
+   * Emits when the dialog is closed. Wether from cancel button, close button, or ESC button pressed.
+   */
+  'update:visible': [state: boolean];
+};
+
+/**
+ * Wangsvue - DialogLinkedAsset
+ *
+ * DialogLinkedAsset is a component for creating dialog confirmation of linked assets.
+ *
+ * @group components
+ */
+declare const DialogLinkedAsset: DefineComponent<
+  DialogLinkedAssetProps,
+  DialogLinkedAssetEmit
+>;
+
+export default DialogLinkedAsset;

package/components/dialogprintqr/DialogPrintQR.vue.d.ts

@@ -0,0 +1,18 @@
+import { ClassComponent } from '../../components/ts-helpers.d';
+
+export interface DialogPrintQRProps {
+  visible?: boolean;
+}
+
+export type DialogPrintQREmits = {
+  'printed': [];
+  'update:visible': [state: boolean];
+};
+
+declare class DialogPrintQR extends ClassComponent<
+  DialogPrintQRProps,
+  unknown,
+  DialogPrintQREmits
+> {}
+
+export default DialogPrintQR;

package/components/dialogreportdamage/DialogReportDamage.vue.d.ts

@@ -0,0 +1,34 @@
+import { ClassComponent } from '../../components/ts-helpers.d';
+
+export type ReportSourceType =
+  | 'Available Asset'
+  | 'Audit Asset'
+  | 'Borrowed Asset'
+  | 'Assigned Asset'
+  | 'Tracking Asset'
+  | 'Maintenance Asset';
+
+export interface DialogReportDamageProps {
+  id: string;
+  reportSource: ReportSourceType;
+  visible?: boolean;
+  byUser?: boolean;
+  successMessage?: string;
+  submitFunction?: (body: {
+    notes: string;
+    image: File;
+  }) => Promise<{ status?: number; message?: string } | undefined>;
+}
+
+export type DialogReportDamageEmits = {
+  'update:visible': [value: boolean];
+  'reported': [];
+};
+
+declare class DialogReportDamage extends ClassComponent<
+  DialogReportDamageProps,
+  unknown,
+  DialogReportDamageEmits
+> {}
+
+export default DialogReportDamage;

package/components/dialogreportmissing/DialogReportMissing.vue.d.ts

@@ -0,0 +1,33 @@
+import { ClassComponent } from '../../components/ts-helpers.d';
+
+export type ReportSourceType =
+  | 'Available Asset'
+  | 'Borrowed Asset'
+  | 'Assigned Asset'
+  | 'Transfer Asset';
+
+export interface DialogReportMissingProps {
+  id: string; // The Asset id to get asset detail
+  reportSource: ReportSourceType;
+  trackingId?: string; // The tracking Id to submit permanently missing report
+  visible?: boolean;
+  permanentlyMissing?: boolean;
+  successMessage?: string;
+  submitWithoutApi?: boolean;
+  submitFunction?: (body: {
+    notes: string;
+  }) => Promise<{ status?: number; message?: string } | undefined>;
+}
+
+export type DialogReportMissingEmits = {
+  'update:visible': [value: boolean];
+  'reported': [payload?: { notes: string }];
+};
+
+declare class DialogReportMissing extends ClassComponent<
+  DialogReportMissingProps,
+  unknown,
+  DialogReportMissingEmits
+> {}
+
+export default DialogReportMissing;

package/components/dialogreporttag/DialogReportTag.vue.d.ts

@@ -0,0 +1,31 @@
+import { ClassComponent } from '../../components/ts-helpers.d';
+
+export interface DialogReportTagProps {
+  id: string;
+  tagReported?: ReportTagBody;
+  visible?: boolean;
+  successMessage?: string;
+  submitLabel?: string;
+  submitWithoutApi?: boolean;
+  submitFunction?: (
+    body: ReportTagBody,
+  ) => Promise<{ status?: number; message?: string } | undefined>;
+}
+
+export type DialogReportTagEmits = {
+  'update:visible': [value: boolean];
+  'reported': [payload?: ReportTagBody];
+};
+
+export type ReportTagBody = {
+  qr: boolean;
+  rfid: boolean;
+};
+
+declare class DialogReportTag extends ClassComponent<
+  DialogReportTagProps,
+  unknown,
+  DialogReportTagEmits
+> {}
+
+export default DialogReportTag;

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

@@ -1,9 +1,10 @@
 import { TreeSelectionKeys } from 'primevue/tree';
+import { Slot } from 'vue';
+
 import { TreeNode } from '../basetree/BaseTree.vue.d';
 import { QueryParams, ShortFetchResponse } from '../datatable/DataTable.vue.d';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import TreeInstance, { TreeProps } from '../tree/Tree.vue.d';
-import { Slot } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface DialogSelectTreeProps
   extends Omit<TreeProps, 'type' | 'filter'> {

package/components/dialogselectuser/DialogSelectUser.vue.d.ts

@@ -0,0 +1,102 @@
+import { FetchListResponse } from '@fewangsit/workspace-api-services/src/types/fetchResponse.type';
+import { FetchUserRoleOptionResponse } from '@tagsamurai/fats-api-services/src/dto/role.dto';
+import { User } from '@tagsamurai/fats-api-services/src/types/user.type';
+
+import { QueryParams } from '../../components/datatable/DataTable.vue.d';
+import { ClassComponent } from '../../components/ts-helpers';
+
+export type EmitSelectionValue = {
+  checkbox: User[];
+  single: User;
+};
+
+export type SelectionType = 'single' | 'checkbox';
+
+/**
+ * Props for DialogSelectUser component
+ */
+export interface DialogSelectUserProps {
+  /**
+   * The header of the dialog.
+   *
+   * @defaultValue "Select User"
+   */
+  header?: string;
+
+  /**
+   * The description of the table.
+   *
+   * @defaultValue "Select user"
+   */
+  description?: string;
+
+  /**
+   * Table's selection type
+   */
+  selectionType: SelectionType;
+
+  /**
+   * Specifies the visibility of the dialog.
+   * @defaultValue false
+   */
+  visible?: boolean | undefined;
+
+  /**
+   * List that will be show above the table
+   * @defaultValue undefined
+   */
+  list?: string[];
+
+  /**
+   * Set custom button select label
+   */
+  selectButtonLabel?: string;
+
+  /**
+   * The function to fetch data on DataTable mounted and on queryParams dependencies updated.
+   *
+   * @param params this is required
+   */
+  fetchFunction?: (
+    params: QueryParams,
+  ) => Promise<FetchListResponse | undefined>;
+
+  /**
+   * The function to fetch options on DialogSelectUserFilter.
+   *
+   */
+  fetchOptionFunction?: () => Promise<
+    FetchUserRoleOptionResponse['data'] | undefined
+  >;
+}
+
+/**
+ * Emits for DialogSelectUser component
+ */
+export type DialogSelectUserEmits<T = User> = {
+  /**
+   * Emits when the dialog is closed. Wether from cancel button, close button, or ESC button pressed.
+   */
+  'update:visible': [state: boolean];
+
+  /**
+   * Emits when you done selected user.
+   */
+  'selected': [user: T];
+};
+
+/**
+ * **TSVue - DialogSelectUser**
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group components
+ */
+declare const DialogSelectUser: ClassComponent<
+  DialogSelectUserProps,
+  unknown,
+  DialogSelectUserEmits
+>;
+
+export default DialogSelectUser;

package/components/dialogselectuser/options/columns.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+import { TableColumn } from '../../../components/datatable/DataTable.vue.d';
+export declare const selectUserColumns: () => Ref<TableColumn[]>;

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

@@ -1,8 +1,20 @@
 import { Slot } from 'vue';
-import { DropdownOption, OptionValue } from 'lib/types/options.type';
+
+import { BadgeProps } from '../../components/badge/Badge.vue.d';
+import { WangsIcons } from '../../components/icon/Icon.vue.d';
+
 import { CustomValidation } from '../form/Form.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import { BadgeProps } from 'lib/components/badge/Badge.vue.d';
+
+export type OptionValue = string | number | boolean | Record<string, any>;
+
+export type Option = {
+  label?: string;
+  value?: OptionValue;
+  visible?: boolean;
+  icon?: WangsIcons;
+  [key: string]: any;
+};
 
 /**
  * Configuration interface for localizing dropdown component placeholders and error messages.
@@ -77,7 +89,7 @@ export interface DropdownProps {
   /**
    * List of options to display.
    */
-  options?: DropdownOption[] | string[] | Record<string, any>;
+  options?: Option[] | string[] | Record<string, any>;
 
   /**
    * Allows `null` to be treated as a valid selectable option in the dropdown.
@@ -208,11 +220,18 @@ export interface DropdownProps {
    * @default 'Search'
    */
   filterPlaceholder?: string;
+
+  /**
+   * To determine whether dropdown panel width should fit its max content or not
+   *
+   * @default false
+   */
+  panelMaxContent?: boolean;
 }
 
 export interface DropdownSlots {
   'value': Slot<{ value: string; originalValue: any }>;
-  'option': Slot<{ option: DropdownOption }>;
+  'option': Slot<{ option: Option }>;
   'addon-left': Slot;
   'addon-right': Slot;
 }
@@ -230,6 +249,11 @@ export type DropdownEmits = {
    * Emits when overlay shown.
    */
   'show': [];
+
+  /**
+   * Emits when the Field Info icon is clicked.
+   */
+  'fieldInfoClick': [];
 };
 
 /**

package/components/editor/Editor.vue.d.ts

@@ -1,4 +1,5 @@
 import { EditorEvents } from '@tiptap/vue-3';
+
 import { ClassComponent } from '../ts-helpers';
 
 export interface EditorProps {

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

@@ -1,4 +1,6 @@
-import { DefineComponent } from 'vue';
+import { Slot } from 'vue';
+
+import { ClassComponent } from '../ts-helpers';
 
 export interface FieldWrapperLocaleConfig {
   /**
@@ -64,6 +66,21 @@ export interface FieldWrapperProps {
   tooltipPos?: 'top' | 'right' | 'bottom' | 'left';
 }
 
-declare const FieldWrapper: DefineComponent<FieldWrapperProps>;
+export interface FieldWrapperSlots {
+  'label-addon': Slot;
+}
+
+declare class FieldWrapper extends ClassComponent<
+  FieldWrapperProps,
+  FieldWrapperSlots,
+  unknown
+> {}
+
+export type FieldWrapperEmits = {
+  /**
+   * Emitted when the information (tooltip) is clicked.
+   */
+  infoClick: [];
+};
 
 export default FieldWrapper;

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

@@ -2,6 +2,7 @@ import {
   FileUploadErrorEvent,
   FileUploadUploadEvent,
 } from 'primevue/fileupload';
+
 import { CustomValidation } from '../form/Form.vue.d';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 

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

@@ -1,11 +1,16 @@
-import { MultiSelectOption } from 'lib/types/options.type';
+import { AxiosResponse } from 'axios';
 import { DefineComponent, Slot } from 'vue';
+
+import {
+  DropdownProps,
+  Option,
+} from '../../components/dropdown/Dropdown.vue.d';
+
+import { ButtonSelectTreeProps } from '../buttonselecttree/ButtonSelectTree.vue.d';
 import { CalendarProps } from '../calendar/Calendar.vue.d';
 import { QueryParams } from '../datatable/DataTable.vue.d';
-import { DropdownProps } from '../dropdown/Dropdown.vue.d';
 import { InputRangeNumberProps } from '../inputrangenumber/InputRangeNumber.vue.d';
 import { MultiSelectProps } from '../multiselect/MultiSelect.vue.d';
-import { ButtonSelectTreeProps } from '../buttonselecttree/ButtonSelectTree.vue.d';
 
 export type FilterMatchMode =
   | 'CONTAINS'
@@ -19,6 +24,27 @@ export type FilterMatchMode =
   | 'BETWEEN'
   | 'DATE_BETWEEN';
 
+/**
+ * Represents a function type for fetching options based on query parameters.
+ *
+ * @template T - The type of query parameters, extending `QueryParams`. Defaults to `any`.
+ *
+ * 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.
+ *
+ * @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.
+ */
+export type FetchOptionFn<T extends QueryParams = any> =
+  | ((args: T) => Option[])
+  | ((args: T) => Promise<Option[]>)
+  | ((args: T) => Promise<AxiosResponse<FetchOptionResponse<T>>>);
+
 // More specific filter field types
 export interface MultiSelectFilterField extends MultiSelectProps {
   type: 'multiselect';
@@ -32,9 +58,7 @@ export interface MultiSelectFilterField extends MultiSelectProps {
   field: string;
   optionField?: string; // @example - actionOptions
   params?: QueryParams; // Additional QueryParams for the fetchOptionFn
-  fetchOptionFn?:
-    | ((args?: any) => MultiSelectOption[] | undefined) // Sync function to fetch options
-    | ((args?: any) => Promise<MultiSelectOption[] | undefined>); // Async function
+  fetchOptionFn?: FetchOptionFn;
 }
 
 export interface DropdownFilterField extends DropdownProps {
@@ -49,9 +73,7 @@ export interface DropdownFilterField extends DropdownProps {
   field: string;
   optionField?: string; // @example - actionOptions
   params?: QueryParams; // Additional QueryParams for the fetchOptionFn
-  fetchOptionFn?:
-    | ((args?: any) => MultiSelectOption[] | undefined) // Sync function to fetch options
-    | ((args?: any) => Promise<MultiSelectOption[]> | undefined); // Async function
+  fetchOptionFn?: FetchOptionFn;
 }
 
 export interface RangeNumberFilterField extends InputRangeNumberProps {
@@ -98,16 +120,24 @@ export interface CalendarFilterField extends CalendarProps {
 
 export type AdditionalFilterField = ButtonSelectTreeFilterField;
 
-export type FilterField =
+export type FilterField = (
   | AdditionalFilterField
   | MultiSelectFilterField
   | DropdownFilterField
   | RangeNumberFilterField
-  | CalendarFilterField;
+  | CalendarFilterField
+) & {
+  /**
+   * Filter field visibility
+   *
+   * You dont need manually filter, this component already handle it.
+   */
+  visible?: boolean;
+};
 
 export type FilterOptions<Opt = Record<string, boolean>> = Record<
   keyof Opt,
-  MultiSelectOption[]
+  Option[]
 >;
 
 export type LoadingFilters = Record<string, boolean>;

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

@@ -5,11 +5,12 @@ import {
   MaybeArray,
 } from 'vee-validate';
 import { Ref, Slot } from 'vue';
+
 import {
   ClassComponent,
   GlobalComponentConstructor,
-  Nullable,
   HintedString,
+  Nullable,
 } from '../ts-helpers';
 
 export type Condition =

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

@@ -103,6 +103,7 @@ export type WangsIcons =
   | 'filter'
   | 'folder'
   | 'folder-add-line'
+  | 'gate'
   | 'group'
   | 'hand-coin'
   | 'handheld'
@@ -123,6 +124,7 @@ export type WangsIcons =
   | 'link-unlink-m'
   | 'list-settings'
   | 'loader-4'
+  | 'lock-line'
   | 'logout-box-r'
   | 'mail-open'
   | 'mail-send'
@@ -131,6 +133,7 @@ export type WangsIcons =
   | 'map-pin'
   | 'menu'
   | 'menu-unfold'
+  | 'mind-map'
   | 'minus'
   | 'money-cny-box'
   | 'money-dollar-circle'
@@ -151,6 +154,7 @@ export type WangsIcons =
   | 'qr'
   | 'qr-scan'
   | 'reception'
+  | 'recycle-bin'
   | 'refresh'
   | 'replace-tag'
   | 'report-tag'

package/components/image/Image.vue.d.ts

@@ -9,6 +9,7 @@
  *
  */
 import { TransitionProps, VNode } from 'vue';
+
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import {
@@ -195,6 +196,13 @@ export interface ImageProps {
    * The thumbnail image.
    */
   src?: string | Blob;
+
+  /**
+   * Wether use preview full image functionality
+   *
+   * @default true
+   */
+  preview?: boolean;
   /**
    * The thumbnail image width.
    *

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

@@ -141,6 +141,12 @@ export interface ImageCompressorProps {
    * @default true
    */
   showInfo?: boolean;
+  /**
+   * Change the requirements of the photo
+   *
+   * @default undefined - will use maxSizeRequirement, imageTypeRequirement from LocaleConfig
+   */
+  customRequirements?: string[];
   /**
    * Show dialog confirmation before delete the image.
    */