@fewangsit/wangsvue-gsts 1.0.0-alpha.1

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

@@ -0,0 +1,141 @@
+import { MultiSelectOption } from 'lib/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';
+import { ButtonSelectTreeProps } from '../buttonselecttree/ButtonSelectTree.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
+  optionField?: string; // @example - actionOptions
+  params?: QueryParams; // Additional QueryParams for the fetchOptionFn
+  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
+  optionField?: string; // @example - actionOptions
+  params?: QueryParams; // Additional QueryParams for the fetchOptionFn
+  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 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;
+}
+
+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,
+  MultiSelectOption[]
+>;
+
+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[];
+}
+
+/**
+ * Slots for FilterContainer component
+ */
+export type FilterContainerSlots = {
+  /**
+   * @deprecated Please use props.fields instead
+   */
+  default: Slot;
+
+  /**
+   * Additional template for field.
+   */
+  field: Slot<{ field: AdditionalFilterField }>;
+};
+
+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/formatDateTimeRange.helper.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Format the time in range selection when not show time.
+ * It will adjust the end range time to 23.59.59 and the start to 00.00.00
+ *
+ * @returns {number[]} - The formatted date time range in millis. [start, end]
+ */
+export declare const formatDateTimeRange: (e: number[]) => number[];

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,306 @@
+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;
+
+  /**
+   * 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;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Form: GlobalComponentConstructor<Form>;
+  }
+}
+
+export default Form;

package/components/gallerypreview/GalleryPreview.vue.d.ts

@@ -0,0 +1,31 @@
+import { ClassComponent } from '../ts-helpers.d';
+
+export type File = {
+  _id: string;
+  name: string;
+  type: string;
+  src: string;
+  createdAt: string;
+};
+
+export interface GalleryPreviewProps {
+  files: File[];
+}
+
+/**
+ * **WangsVue - GalleryPreview**
+ *
+ * --- ---
+ * ![WangsVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group Component
+ *
+ * @experimental
+ */
+declare class GalleryPreview extends ClassComponent<
+  GalleryPreviewProps,
+  unknown,
+  unknown
+> {}
+
+export default GalleryPreview;

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/helpers/label.d.ts

@@ -0,0 +1,15 @@
+import { SetupContext, VNode } from 'vue';
+interface LabelProps {
+    label: string;
+}
+/**
+ * For input like checkbox, radiobutton, toggleswitch, etc.
+ *
+ * Conditionally wrap the input with label element when props.label is defined.
+ *
+ * @param propsData
+ * @param setupContext
+ * @returns
+ */
+declare const Label: (propsData: LabelProps, setupContext?: SetupContext) => VNode;
+export default Label;