@fewangsit/wangsvue-fats 1.0.0-alpha.125 → 1.0.0-alpha.127

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

@@ -11,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'
@@ -24,83 +25,79 @@ 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';
+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?: FetchOptionFn;
-}
-
-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?: FetchOptionFn;
-}
-
-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<OptionsQueryParams>>>;
+
+  optionField?: keyof OptionsQueryParams; // @example - actionOptions
+  params?: OptionsQueryParams; // Additional QueryParams for the fetchOptionFn
+};
 
-  /**
-   * 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 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.
    */
@@ -110,31 +107,47 @@ 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,
   Option[]
@@ -176,11 +189,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/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 {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewangsit/wangsvue-fats",
-  "version": "1.0.0-alpha.125",
+  "version": "1.0.0-alpha.127",
   "author": "Wangsit FE Developer",
   "description": "Fixed Asset Tagsamurai VueJS Component Library",
   "type": "module",