@fewangsit/wangsvue 1.5.178

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

@@ -0,0 +1,151 @@
+import { FileUploadErrorEvent, FileUploadUploadEvent } from 'primevue/fileupload';
+import { CustomValidation } from '../form/Form.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+
+export type InputErrorCodes = 'FILE_SIZE_TOO_LARGE';
+
+/**
+ * Defines valid properties in FileUpload component.
+ */
+export type FileUploadProps = {
+  /**
+   * Pattern to restrict the allowed file types such as 'image/*'.
+   */
+  accept?: string | undefined;
+  /**
+   * Disables the upload functionality.
+   * @defaultValue false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Maximum file size allowed in bytes.
+   */
+  maxFileSize?: number | undefined;
+  /**
+   * Props to determine whether file upload support multiple files or not
+   *
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * Message of the invalid fize size.
+   * - Use {0} to get the file's name
+   * - Use {1} to get the max file size
+   * - Use {2} to get the accepted file types from props.accept
+   * - Use {2.1} to get the accepted file types from props.fileExtensions
+   * @defaultValue {0}: Invalid file size, file size should be smaller than {1}.
+   */
+  invalidFileSizeMessage?: string | undefined;
+  /**
+   * Message of the invalid fize type.
+   * - Use {0} to get the file's name
+   * - Use {1} to get the max file size
+   * - Use {2} to get the accepted file types
+   * - Use {2.1} to get the accepted file types from props.fileExtensions
+   * @defaultValue '{0}: Invalid file type, allowed file types: {2}'
+   */
+  invalidFileTypeMessage?: string | undefined;
+  /**
+   * Label of the file upload.
+   * @defaultValue 'Upload File'
+   */
+  label?: string | undefined;
+  /**
+   * Whether to use an upload button.
+   * @defaultValue true
+   */
+  withUpload?: boolean | undefined;
+  /**
+   * Label of the upload button.
+   * @defaultValue 'Upload'.
+   */
+  uploadLabel?: string | undefined;
+  /**
+   * Placeholder of the file upload.
+   * @defaultValue 'Select File'
+   */
+  placeholder?: string | undefined;
+  /**
+   * File extensions to display the accepted extensions.
+   */
+  fileExtensions?: string | undefined;
+  /**
+   * The note about the requirements of file for being uploaded.
+   *
+   * Placed at the bottom right of input.
+   */
+  fileRequirements?: string | undefined;
+  /**
+   * The function to be called after the upload button is clicked. (Must be used when withUpload is true)
+   */
+  uploadFunction?: (files: File[]) => Promise<void>;
+  /**
+   * Whether the input should be validated with vee-validator or not.
+   * If you use this component within form input, you need to set this props as true.
+   */
+  useValidator?: boolean;
+  /**
+   * This prop is required if you use this component in a form input.
+   * Specify the unique field name, match with your needs for API request.
+   *
+   * @default 'fileUpload'
+   */
+  fieldName?: string;
+  /**
+   * Whether this input field is required or not.
+   */
+  mandatory?: boolean;
+  /**
+   * Whether show toast error message on invalid file input
+   *
+   * @default true;
+   */
+  useErrorToast?: boolean;
+  /**
+   * Set custom validator message.
+   * Will be show if invalid="true"
+   */
+  validatorMessage?: string | CustomValidation;
+  /**
+   * Classes for validator message in input field.
+   */
+  validatorMessageClass?: string;
+};
+
+export type FileUploadEmits = {
+  /**
+   * Callback to invoke when file upload is complete.
+   */
+  upload: [event: FileUploadUploadEvent];
+  /**
+   * Callback to invoke if file upload fails.
+   */
+  error: [event: FileUploadErrorEvent | InputErrorCodes];
+};
+
+/**
+ * **WangsVue - FileUpload**
+ *
+ * _FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations._
+ *
+ * [Live Demo](https://fewangsit.github.io/wangsvue/button)
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ *
+ */
+declare class FileUpload extends ClassComponent<
+  FileUploadProps,
+  null,
+  FileUploadEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    FileUpload: GlobalComponentConstructor<FileUpload>;
+  }
+}
+
+export default FileUpload;

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

@@ -0,0 +1,109 @@
+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';
+import { DropdownProps } from '../dropdown/Dropdown.vue.d';
+import { InputRangeNumberProps } from '../inputrangenumber/InputRangeNumber.vue.d';
+import { MultiSelectProps } from '../multiselect/MultiSelect.vue.d';
+
+
+// More specific filter field types
+export interface MultiSelectFilterField extends MultiSelectProps {
+  type: 'multiselect';
+  field: string; // The name of the field this filter applies to
+  fetchOptionFn?:
+    | ((args?: any) => MultiSelectOption[]) // Sync function to fetch options
+    | ((args?: any) => Promise<MultiSelectOption[]>); // Async function
+}
+
+export interface DropdownFilterField extends DropdownProps {
+  type: 'dropdown';
+  field: string; // The name of the field this filter applies to
+  fetchOptionFn?:
+    | ((args?: any) => MultiSelectOption[]) // Sync function to fetch options
+    | ((args?: any) => Promise<MultiSelectOption[]>); // Async function
+}
+
+export interface RangeNumberFilterField extends InputRangeNumberProps {
+  type: 'rangenumber';
+  /**
+   * Specify min and max field
+   *
+   * @example ['minAge', 'maxAge']
+   */
+  fields: string[];
+  tooltip?: string;
+}
+
+export interface CalendarFilterField extends CalendarProps {
+  type: 'calendar';
+  field: string;
+}
+
+export type FilterField =
+  | MultiSelectFilterField
+  | DropdownFilterField
+  | RangeNumberFilterField
+  | CalendarFilterField;
+
+export type FilterOptions<Opt = Record<string, boolean>> = Record<
+  keyof Opt,
+  MultiSelectOption[]
+>;
+
+export type LoadingFilters = Record<string, boolean>;
+
+export type FetchOptionResponse<Opt = Record<string, boolean>> = {
+  message: string;
+  data: FilterOptions<Opt>;
+};
+
+export interface FilterContainerProps {
+  /**
+   * Specify the table name integrated with this filter.
+   *
+   * @default datatable - the default table name
+   */
+  tableName?: string;
+  /**
+   * Set the fields count in a row
+   *
+   * @default 4 grid columns
+   */
+  fieldsPerRow?: number;
+  fields: FilterField[];
+}
+
+/**
+ * Slots for FilterContainer component
+ */
+export type FilterContainerSlots = {
+  /**
+   * @deprecated Please use props.fields instead
+   */
+  default: Slot;
+};
+
+export type FilterContainerEmits = {
+  apply: [filter: QueryParams];
+};
+
+/**
+ * **WangsVue - FilterContainer**
+ *
+ * _FilterContainer is a component for generating a dynamic grid-based layout for any count of filter fields.
+ * It calculates the number of children in the container and sets their grid area style dynamically.
+ *
+ * The grid layout is determined by the row and column position, which are incremented based on the child count.
+ * If the child count is odd and the child is the last one (which is Buttons Action),
+ * it is placed in the 4th column._
+ *
+ * @group components
+ */
+declare const FilterContainer: DefineComponent<
+  FilterContainerProps,
+  FilterContainerEmits,
+  FilterContainerSlots
+>;
+
+export default FilterContainer;

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

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

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

@@ -0,0 +1,3 @@
+import { FilterOptions, LoadingFilters, MultiSelectFilterField } from '../FilterContainer.vue.d';
+declare const getOptions: (fn: MultiSelectFilterField["fetchOptionFn"], field: string, filterOption: FilterOptions, loading: LoadingFilters) => Promise<void>;
+export default getOptions;

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

@@ -0,0 +1,207 @@
+import { FieldContext, FieldState, GenericObject } from 'vee-validate';
+import { Ref, Slot } from 'vue';
+import { CheckboxModelValue } from '../checkbox/Checkbox.vue.d';
+import { ClassComponent, GlobalComponentConstructor, Nullable, HintedString } from '../ts-helpers';
+
+
+export type Condition =
+  | 'empty'
+  | 'exceed'
+  | 'invalidFormat'
+  | 'exist'
+  | 'mismatch';
+
+export type CustomValidation = Partial<Record<Condition, string>>;
+
+type FieldValue =
+  | Nullable<string>
+  | Nullable<number>
+  | string
+  | string[]
+  | number
+  | number[]
+  | boolean
+  | undefined
+  | null
+  | object;
+
+export type FieldValidation<T = FieldValue | undefined> =
+  | {
+      value: T;
+      errorMessage?: Ref<string | undefined>;
+      setErrors?: (errors?: string | string[]) => void;
+      handleReset?: () => void;
+      validate?: () => void;
+    }
+  | (Omit<FieldContext, 'value'> & {
+      value: T;
+    });
+
+export type FormValue = Record<string, unknown> | Record<string, unknown>[];
+
+/**
+ * Generic form payload, able to receive types from outside
+ */
+export type FormPayload<FormValuesType = Record<string, FormValue>> = {
+  stayAfterSubmit: boolean;
+  formValues: FormValuesType;
+};
+
+/**
+ * Props for Form component
+ */
+export interface FormProps {
+  /**
+   * The template for form buttons.
+   */
+  buttonsTemplate?: ('clear' | 'submit' | 'cancel')[];
+  /**
+   * Custom button cancel label.
+   */
+  cancelBtnLabel?: string;
+  /**
+   * Custom button clear label.
+   */
+  clearBtnLabel?: string;
+  /**
+   * The number of columns per row.
+   * @default 1;
+   */
+  columnPerRow?: number;
+  /**
+   * Determines whether form footer should be hidden or not
+   */
+  hideFooter?: boolean;
+  /**
+   * Determines if the stay checkbox should be hidden.
+   */
+  hideStayCheckbox?: boolean;
+  /**
+   * Invalid form state.
+   */
+  invalid?: boolean;
+  /**
+   * Prevent form resets after submitted. Default behaviour is form resetted after submit.
+   *
+   * @default true
+   */
+  resetAfterSubmit?: boolean;
+  /**
+   * Custom button submit label.
+   */
+  submitBtnLabel?: string;
+  /**
+   * Custom label for stay checkbox.
+   */
+  stayCheckboxLabel?: string;
+  /**
+   * Custom submit form validator message.
+   */
+  validatorMessage?: string;
+  /**
+   * Defines the style of the cancel button.
+   */
+  cancelBtnSeverity?: HintedString<
+    | 'secondary'
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'help'
+    | 'danger'
+    | 'contrast'
+  >;
+  /**
+   * Defines the style of the submit button.
+   */
+  submitBtnSeverity?: HintedString<
+    | 'secondary'
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'help'
+    | 'danger'
+    | 'contrast'
+  >;
+}
+
+/**
+ * Slots for Form component
+ */
+export interface FormSlots {
+  /**
+   * The fields slot for the form. Here is where you can put your form fields.
+   */
+  fields: Slot<{ formValues: GenericObject; key?: number }>;
+}
+
+/**
+ * Emits for Form component
+ */
+export type FormEmits = {
+  /**
+   * Emitted when button template `Cancel` clicked (doesn't matter its label)
+   */
+  cancel: [];
+  /**
+   * Emitted when button template `Clear` clicked (doesn't matter its label)
+   */
+  clear: [];
+  /**
+   * Emitted when button template `Submit` clicked (doesn't matter its label)
+   */
+  submit: [values: FormPayload];
+};
+
+/**
+ * **WangsVue - Form**
+ *
+ * _Form is a component for creating forms with validation on submit using vee-validate.
+ * You need to install vee-validate while using this component._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group components
+ */
+declare class Form extends ClassComponent<FormProps, FormSlots, FormEmits> {
+  /**
+   * Exposed errors of form
+   */
+  errors: Partial<Record<string, string>>;
+  /**
+   * The ref of form element.
+   */
+  formElement: HTMLFormElement;
+  /**
+   * Whether to show validator or not
+   */
+  showValidator: boolean;
+  /**
+   * Whether to keep the dialog remains visible or not after submit.
+   */
+  stayAfterSubmit: CheckboxModelValue;
+  /**
+   * Exposed function to clears the form fields.
+   */
+  clearField: () => void;
+  /**
+   * Exposed function to clears the specific field.
+   */
+  resetField: (field: string, state?: Partial<FieldState>) => void;
+  /**
+   * Exposed function that handle submit inside form component
+   */
+  submit: (e?: Event | undefined) => Promise<void | undefined>;
+  /**
+   * Exposed function to set the outer fields wrapper height.
+   */
+  setOuterFieldsWrapperHeight: () => void;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Form: GlobalComponentConstructor<Form>;
+  }
+}
+
+export default Form;

package/components/helpers/convertToArrayClass.helper.d.ts

@@ -0,0 +1,2 @@
+declare const convertToArrayClass: (classes?: string | string[]) => string[];
+export default convertToArrayClass;

package/components/helpers/index.d.ts

@@ -0,0 +1,2 @@
+import { default as toArrayClass } from './convertToArrayClass.helper';
+export { toArrayClass };

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

@@ -0,0 +1,215 @@
+export type WangsIconseverities =
+  | 'danger'
+  | 'info'
+  | 'warning'
+  | 'primary'
+  | 'success'
+  | 'secondary';
+
+/**
+ * List of all available icons.
+ */
+export type WangsIcons =
+  | 'add'
+  | 'arrow-down'
+  | 'arrow-drop-down'
+  | 'arrow-go-back'
+  | 'arrow-up-s'
+  | 'arrow-up-down'
+  | 'arrow-left'
+  | 'arrow-left-double'
+  | 'arrow-left-right'
+  | 'arrow-right'
+  | 'arrow-right-double'
+  | 'arrow-right-fill'
+  | 'asset-view'
+  | 'assignment'
+  | 'attachment-2'
+  | 'audit'
+  | 'barricade-line'
+  | 'bell'
+  | 'bell-alert'
+  | 'borrow'
+  | 'building'
+  | 'building-4'
+  | 'calculator'
+  | 'calendar'
+  | 'calendar-todo'
+  | 'chat'
+  | 'chat-check'
+  | 'change-tag'
+  | 'check'
+  | 'check-double-fill'
+  | 'checkbox-circle'
+  | 'checkbox-circle-fill'
+  | 'checkbox-blank-circle'
+  | 'close'
+  | 'close-circle'
+  | 'close-circle-fill'
+  | 'cloud-line'
+  | 'coins'
+  | 'completion'
+  | 'dashboard'
+  | 'database'
+  | 'delete-back'
+  | 'delete-bin'
+  | 'delete-bin-7'
+  | 'device'
+  | 'disposal'
+  | 'download'
+  | 'dropbox'
+  | 'dragable-menu'
+  | 'edit'
+  | 'ellipsis-h'
+  | 'emotion-happy-fill'
+  | 'emotion-unhappy-fill'
+  | 'error'
+  | 'error-fill'
+  | 'exchange'
+  | 'extension-borrow'
+  | 'eye'
+  | 'eye-off'
+  | 'flag'
+  | 'file-add'
+  | 'file-copy'
+  | 'file-copy-2-line'
+  | 'file-edit'
+  | 'file-history'
+  | 'file-history-fill'
+  | 'file-info'
+  | 'files'
+  | 'file-list-2'
+  | 'file-list'
+  | 'file-settings'
+  | 'file-shield-line'
+  | 'file-shield-2'
+  | 'file-up'
+  | 'filter-fill'
+  | 'filter'
+  | 'folder'
+  | 'group'
+  | 'hand-coin'
+  | 'handheld'
+  | 'history'
+  | 'image-add'
+  | 'indeterminate-circle-fill'
+  | 'info'
+  | 'information-line'
+  | 'list-check'
+  | 'link'
+  | 'luggage-cart'
+  | 'csv'
+  | 'xls'
+  | 'doc'
+  | 'data'
+  | 'line-chart'
+  | 'link-unlink-m'
+  | 'list-settings'
+  | 'loader-4'
+  | 'logout-box-r'
+  | 'mail-open'
+  | 'mail-send'
+  | 'map-2'
+  | 'map-pin'
+  | 'menu'
+  | 'menu-unfold'
+  | 'money-cny-box'
+  | 'more'
+  | 'move-to'
+  | 'node-tree'
+  | 'note'
+  | 'notification'
+  | 'pdf'
+  | 'pair-tag'
+  | 'pencil'
+  | 'phone'
+  | 'printer'
+  | 'printer-cloud'
+  | 'price-tag-3'
+  | 'profile'
+  | 'qr'
+  | 'qr-scan'
+  | 'refresh'
+  | 'replace-tag'
+  | 'report-tag'
+  | 'repair-ticketing'
+  | 'rfid'
+  | 'round-keyboard-arrow-left'
+  | 'round-keyboard-arrow-right'
+  | 'round-keyboard-double-arrow-left'
+  | 'round-keyboard-double-arrow-right'
+  | 'search'
+  | 'search-line'
+  | 'search-eye'
+  | 'send-plane-line'
+  | 'settings'
+  | 'shopping-cart-2'
+  | 'smartphone'
+  | 'sort-asc'
+  | 'sort-desc'
+  | 'spinner'
+  | 'stack'
+  | 'star'
+  | 'store'
+  | 'subtract'
+  | 'time'
+  | 'ticket'
+  | 'tools'
+  | 'tracking'
+  | 'unassign'
+  | 'upload-2'
+  | 'upload-cloud-2'
+  | 'user'
+  | 'user-add'
+  | 'user-follow'
+  | 'user-received-2-line'
+  | 'user-search'
+  | 'user-settings'
+  | 'user-shared-2-line'
+  | 'user-star'
+  | 'user-unfollow'
+  | 'verification'
+  | 'team'
+  | 'mail'
+  | 'timer'
+  | 'format-clear'
+  | 'code-line'
+  | 'link-m'
+  | 'list-ordered'
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'list-unordered'
+  | 'external-link'
+  | 'whatsapp'
+  | 'chat-1-line'
+  | 'attachment-2'
+  | 'save'
+  | 'chat-new-line'
+  | 'code-box-line'
+  | 'file-chart-line'
+  | 'bar-chart-line'
+  | 'bug-2-line'
+  | 'run-line'
+  | 'user-unfollow-line'
+  | 'archive-line'
+  | 'shield-user-line'
+  | 'emotion-happy-line'
+  | 'list-settings-line'
+  | 'timer-line'
+  | 'star-fill';
+
+export interface IconProps {
+  icon: WangsIcons;
+  severity?: WangsIconseverities;
+  /**
+   * Show info on hover.
+   */
+  info?: string;
+  /**
+   * Set the position of tooltip.
+   */
+  tooltipPos?: 'top' | 'right' | 'bottom' | 'left';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  class?: any;
+}