@fewangsit/wangsvue-fats 1.0.0-alpha.31 → 1.0.0-alpha.32

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

@@ -0,0 +1,184 @@
+import { DefineComponent, Slot } from 'vue';
+import { CalendarProps } from '../calendar/Calendar.vue.d';
+import { QueryParams } from '../datatable/DataTable.vue.d';
+import {
+  DropdownProps,
+  Option,
+} from '../../components/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'
+  | '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';
+  /**
+   * 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) => 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.
+   *
+   * 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
+   *
+   * @example ['minAge', 'maxAge']
+   */
+  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;
+}
+
+export interface ButtonSelectTreeFilterField
+  extends Omit<ButtonSelectTreeProps, 'type' | 'label' | 'fieldLabel'> {
+  type: 'group' | 'category';
+  field: string; // The name of the field this filter applies to
+  /**
+   * The field label.
+   */
+  label?: string;
+  /**
+   * The button label.
+   * @default to Select Group|Category
+   */
+  buttonLabel?: string;
+  params?: QueryParams; // Override QueryParams for the fetchTree
+}
+
+export interface CalendarFilterField extends CalendarProps {
+  type: 'calendar';
+  field: string;
+}
+
+export type AdditionalFilterField = ButtonSelectTreeFilterField;
+
+export type FilterField =
+  | AdditionalFilterField
+  | MultiSelectFilterField
+  | DropdownFilterField
+  | RangeNumberFilterField
+  | CalendarFilterField;
+
+export type FilterOptions<Opt = Record<string, boolean>> = Record<
+  keyof Opt,
+  Option[]
+>;
+
+export type LoadingFilters = Record<string, boolean>;
+
+export type FetchOptionResponse<Opt = Record<string, boolean>> = {
+  message: string;
+  data: FilterOptions<Opt>;
+};
+
+export interface FilterContainerLocaleConfig {
+  clearFieldText?: string;
+  applyText?: string;
+}
+
+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[];
+  /**
+   * Enable static filtering
+   */
+  static?: boolean;
+}
+
+/**
+ * Slots for FilterContainer component
+ */
+export type FilterContainerSlots = {
+  /**
+   * @deprecated Please use props.fields instead
+   */
+  default: Slot;
+
+  /**
+   * Additional template for field.
+   */
+  field: Slot<{ field: AdditionalFilterField; fieldName: string }>;
+};
+
+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/form/Form.vue.d.ts

@@ -0,0 +1,316 @@
+import {
+  FieldContext,
+  FieldState,
+  GenericObject,
+  MaybeArray,
+} from 'vee-validate';
+import { Ref, Slot } from 'vue';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  Nullable,
+  HintedString,
+} from '../ts-helpers';
+
+export type Condition =
+  | 'empty'
+  | 'exceed'
+  | 'invalidFormat'
+  | 'exist'
+  | 'mismatch';
+
+export type CustomValidation<T extends Partial<Condition> = Condition> =
+  Partial<Record<T, 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;
+      setValue?: (value: any, shouldValidate?: boolean) => void;
+    }
+  | (Omit<FieldContext, 'value'> & {
+      value: T;
+    });
+
+export type FormValue =
+  | string
+  | boolean
+  | number
+  | File
+  | GenericObject
+  | MaybeArray<any>;
+
+/**
+ * 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?: ('cancel' | 'clear' | 'save' | 'submit')[];
+
+  /**
+   * Conditionally disable submit button.
+   */
+  disableSubmit?: boolean;
+
+  /**
+   * 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 save label.
+   */
+  saveBtnLabel?: string;
+
+  /**
+   * Custom button submit label.
+   */
+  submitBtnLabel?: string;
+
+  /**
+   * Custom label for stay checkbox.
+   */
+  stayCheckboxLabel?: string;
+
+  /**
+   * Custom submit form validator message.
+   */
+  validatorMessage?: string;
+
+  /**
+   * Determine whether button template "Save" should also behave like "Submit" (use validations)
+   *
+   * @default false
+   */
+  validateOnSave?: boolean;
+
+  /**
+   * Defines the style of the cancel button.
+   */
+  cancelBtnSeverity?: HintedString<
+    | 'secondary'
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'help'
+    | 'danger'
+    | 'contrast'
+  >;
+
+  /**
+   * Defines the style of the submit button.
+   */
+  saveBtnSeverity?: 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 `Save` clicked (doesn't matter its label)
+   */
+  save: [values: FormPayload];
+
+  /**
+   * 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: boolean;
+
+  /**
+   * 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>;
+
+  /**
+   * Callback invoked on Button Submit clicked
+   */
+  onSubmitClicked: () => void;
+
+  /**
+   * Callback invoked on Button Save clicked
+   */
+  onSaveClicked: () => void;
+
+  /**
+   * Exposed function to set the outer fields wrapper height.
+   */
+  setOuterFieldsWrapperHeight: () => void;
+
+  /**
+   * Set the form values.
+   */
+  setValues: (values: GenericObject) => void;
+
+  /**
+   * Set value for specific field.
+   */
+  setFieldValue<T extends string>(
+    field: T,
+    value: GenericObject[T],
+    shouldValidate?: boolean,
+  ): void;
+
+  /**
+   * Set errors fields
+   * @param fields - {
+   *   name: 'This name already exists'
+   * }
+   */
+  setErrors(fields: GenericObject): void;
+
+  /**
+   * The form values
+   */
+  values: GenericObject;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Form: GlobalComponentConstructor<Form>;
+  }
+}
+
+export default Form;