@arex95/vue-core 1.0.0 → 1.0.2

package/dist/composables/axios/axiosFetch.d.ts

@@ -7,4 +7,4 @@ import { AxiosInstance, AxiosRequestConfig } from 'axios';
  * @param {AxiosRequestConfig} axiosRequest - Configuration for the Axios request.
  * @returns {Promise<T>} A promise with the result of the API request.
  */
-export default function axiosFetch<T>(axios: AxiosInstance, axiosRequest: AxiosRequestConfig): Promise<T>;
+export declare function axiosFetch<T>(axios: AxiosInstance, axiosRequest: AxiosRequestConfig): Promise<T>;

package/dist/composables/axios/createFetch.d.ts

@@ -7,4 +7,4 @@ import { UseQueryOptions } from '@tanstack/vue-query';
  * @param axiosInstance - An optional custom Axios instance to use for the request.
  * @returns A function that handles the request using the provided composable.
  */
-export default function createFetch(fetchComposable: Function, apiUrl: string, axiosInstance?: AxiosInstance): (axiosRequestConfig: AxiosRequestConfig, options?: UseQueryOptions) => any;
+export declare function createFetch(fetchComposable: Function, apiUrl: string, axiosInstance?: AxiosInstance): (axiosRequestConfig: AxiosRequestConfig, options?: UseQueryOptions) => any;

package/dist/composables/axios/useVueQuery.d.ts

@@ -9,7 +9,7 @@ import type { ExtendedQueryOptions } from '../../types';
  * @param {ExtendedQueryOptions<T>} [queryOptions] - Optional Vue Query options with server execution flag.
  * @returns {object} Composable functions and query state for managing API requests.
  */
-export default function useVueQuery<T>(axios: AxiosInstance, axiosRequest: AxiosRequestConfig, queryOptions?: ExtendedQueryOptions): {
+export declare function useVueQuery<T>(axios: AxiosInstance, axiosRequest: AxiosRequestConfig, queryOptions?: ExtendedQueryOptions): {
     data: import("vue").Ref<T, T>;
     error: import("vue").Ref<unknown, unknown>;
     isError: import("vue").Ref<true, true>;

package/dist/composables/breakpoints/useBreakpoint.d.ts

@@ -3,7 +3,7 @@
  *
  * @returns {Object} An object containing the breakpoints and their states.
  */
-export default function useBreakpoint(): {
+export declare function useBreakpoint(): {
     current: import("vue").ComputedRef<("sm" | "md" | "lg" | "xl" | "2xl")[]>;
     active: import("vue").ComputedRef<"" | "sm" | "md" | "lg" | "xl" | "2xl">;
     sm_S: import("vue").ComputedRef<boolean>;

package/dist/composables/filters/useFilter.d.ts

@@ -9,7 +9,7 @@
  *
  * @returns {Object[]} - The filtered list of objects.
  */
-export default function useFilter<T extends Record<string, any>>(items: T[], filterConfig: {
+export declare function useFilter<T extends Record<string, any>>(items: T[], filterConfig: {
     field: string;
     type: 'date' | 'string' | 'number' | 'boolean';
     criteria: any;

package/dist/composables/paginators/usePaginator.d.ts

@@ -7,7 +7,7 @@ import { Ref } from "vue";
  * @param pageSize - Reactive ref for number of items per page.
  * @returns An object with pagination controls.
  */
-export default function usePagination(page: Ref<number>, total: Ref<number>, pageSize: Ref<number>): {
+export declare function usePagination(page: Ref<number>, total: Ref<number>, pageSize: Ref<number>): {
     totalPages: import("vue").ComputedRef<number>;
     canFetchNextPage: () => boolean;
     canFetchPreviousPage: () => boolean;

package/dist/config/axios/axiosConfig.d.ts

@@ -3,7 +3,7 @@ import { AxiosInstance } from 'axios';
  * AxiosService class encapsulates the Axios configuration and logic.
  * It manages request and response interceptors and provides methods for making HTTP requests.
  */
-export default class AxiosService {
+export declare class AxiosService {
     private readonly instance;
     private cancelTokenSource;
     private activeRequests;

package/dist/config/axios/index.d.ts

@@ -1,2 +1 @@
 export * from './axiosConfig';
-export { default as AxiosService } from './axiosConfig';

package/dist/{vue-core.cjs.js → index.js}

@@ -1,10 +1,139 @@
 'use strict';
 
 var axios = require('axios');
-require('@tanstack/vue-query');
+var vueQuery = require('@tanstack/vue-query');
 var vue = require('vue');
 var core = require('@vueuse/core');
 
+/**
+ * A standard REST API interface for handling basic CRUD operations.
+ * This class can be instantiated with a resource endpoint and a fetch composable for API requests.
+ */
+class RestStd {
+    static resource;
+    static fetchComposable;
+    /**
+     * Fetch a list of items from the server.
+     *
+     * @param params Query parameters for filtering the results.
+     * @param options Additional options for the fetch composable.
+     * @returns The result of the fetch composable (typically a promise).
+     */
+    static getMany(params, options = {}) {
+        return this.fetchComposable({
+            method: 'GET',
+            url: this.resource,
+            params,
+        }, options);
+    }
+    /**
+     * Fetch a single item by ID from the server.
+     *
+     * @param id The ID of the item to fetch.
+     * @param params Additional query parameters for the request.
+     * @param options Additional options for the fetch composable.
+     * @returns The result of the fetch composable (typically a promise).
+     */
+    static getOne(id, params, options = {}) {
+        return this.fetchComposable({
+            method: 'GET',
+            url: `${this.resource}/${id}`,
+            params,
+        }, options);
+    }
+    /**
+     * Create a new item on the server.
+     *
+     * @param data The data for the new item to create.
+     * @param options Additional options for the fetch composable.
+     * @returns The result of the fetch composable (typically a promise).
+     */
+    static create(data, options = {}) {
+        return this.fetchComposable({
+            method: 'POST',
+            url: this.resource,
+            data,
+        }, options);
+    }
+    /**
+     * Update an existing item on the server.
+     *
+     * @param id The ID of the item to update.
+     * @param data The updated data for the item.
+     * @param options Additional options for the fetch composable.
+     * @returns The result of the fetch composable (typically a promise).
+     */
+    static update(id, data, options = {}) {
+        return this.fetchComposable({
+            method: 'PUT',
+            url: `${this.resource}/${id}`,
+            data,
+        }, options);
+    }
+    /**
+     * Partially update an existing item on the server.
+     *
+     * @param id The ID of the item to update.
+     * @param data The updated data for the item.
+     * @param options Additional options for the fetch composable.
+     * @returns The result of the fetch composable (typically a promise).
+     */
+    static patch(id, data, options = {}) {
+        return this.fetchComposable({
+            method: 'PATCH',
+            url: `${this.resource}/${id}`,
+            data,
+        }, options);
+    }
+    /**
+     * Delete an item from the server.
+     *
+     * @param id The ID of the item to delete.
+     * @param options Additional options for the fetch composable.
+     * @returns The result of the fetch composable (typically a promise).
+     */
+    static delete(id, options = {}) {
+        return this.fetchComposable({
+            method: 'DELETE',
+            url: `${this.resource}/${id}`,
+        }, options);
+    }
+    /**
+     * Custom request method for more flexibility.
+     *
+     * @param method HTTP method (GET, POST, etc.).
+     * @param params Query parameters.
+     * @param data Request body data.
+     * @param token Authorization token (optional).
+     * @param options Additional options for the fetch composable.
+     * @returns The result of the fetch composable (typically a promise).
+     */
+    static customRequest(method, params, data, options = {}) {
+        return this.fetchComposable({
+            method: method,
+            url: this.resource,
+            params: params,
+            data: data,
+        }, options);
+    }
+}
+
+/**
+ * Custom composable function for making API requests with Axios.
+ *
+ * @template T The expected return type of the API request.
+ * @param {AxiosInstance} axios - The Axios instance for making HTTP requests.
+ * @param {AxiosRequestConfig} axiosRequest - Configuration for the Axios request.
+ * @returns {Promise<T>} A promise with the result of the API request.
+ */
+async function axiosFetch(axios, axiosRequest) {
+    return axios(axiosRequest)
+        .then(response => response.data)
+        .catch(error => {
+        throw error;
+    });
+}
+
 /**
  * AxiosService class encapsulates the Axios configuration and logic.
  * It manages request and response interceptors and provides methods for making HTTP requests.
@@ -112,6 +241,334 @@ class AxiosService {
     }
 }
 
+/**
+ * Creates a fetchComposable for Axios requests with an optional custom instance.
+ * @param fetchComposable - The composable to use for the request (can be any fetch function).
+ * @param apiUrl - The base URL for the Axios instance.
+ * @param axiosInstance - An optional custom Axios instance to use for the request.
+ * @returns A function that handles the request using the provided composable.
+ */
+function createFetch(fetchComposable, apiUrl, axiosInstance) {
+    const instance = axiosInstance || new AxiosService(apiUrl).getAxiosInstance();
+    return (axiosRequestConfig, options) => {
+        return fetchComposable(instance, axiosRequestConfig, options);
+    };
+}
+
+/**
+ * Custom composable for integrating Axios requests with Vue Query.
+ *
+ * @template T - The type of data expected from the query.
+ * @param {AxiosInstance} axios - Axios instance used for making HTTP requests.
+ * @param {AxiosRequestConfig} axiosRequest - Initial Axios request configuration.
+ * @param {ExtendedQueryOptions<T>} [queryOptions] - Optional Vue Query options with server execution flag.
+ * @returns {object} Composable functions and query state for managing API requests.
+ */
+function useVueQuery(axios, axiosRequest, queryOptions) {
+    const key = vue.ref([
+        queryOptions?.queryKey || `${axiosRequest.url}-${JSON.stringify(axiosRequest)}`
+    ]);
+    const axiosRequestRef = vue.ref(axiosRequest);
+    const queryOptionsRef = vue.ref(queryOptions);
+    const isInitialized = vue.ref(false);
+    const errorCallbacks = vue.ref([]);
+    const resultCallbacks = vue.ref([]);
+    /**
+     * Vue Query instance for managing API requests.
+     */
+    const query = vueQuery.useQuery({
+        queryKey: key.value,
+        queryFn: async () => {
+            const response = await axios(axiosRequestRef.value);
+            return response.data;
+        },
+        ...(queryOptionsRef.value?.options ?? {})
+    });
+    /**
+     * Executes the query manually with optional new key and request parameters.
+     *
+     * @param {Array<any>} [newKey] - New query key to use.
+     * @param {object} [newRequestParams] - New request parameters to use.
+     * @param {ExtendedQueryOptions<T>} [newQueryOptions] - New Vue Query options to use.
+     */
+    function execute(newKey, newRequestParams, newQueryOptions) {
+        if (newKey) {
+            key.value = newKey;
+        }
+        if (newRequestParams) {
+            axiosRequestRef.value.data = newRequestParams;
+        }
+        if (newQueryOptions) {
+            queryOptionsRef.value = newQueryOptions;
+        }
+        query.refetch();
+    }
+    /**
+     * Registers a callback to be executed on successful request result.
+     * If data is already available, the callback will be executed immediately.
+     *
+     * @param {(data: T) => void} cb - Callback function to handle the result.
+     */
+    function onResult(cb) {
+        resultCallbacks.value.push(cb);
+        if (query.data.value !== undefined && query.data.value !== null) {
+            cb(query.data.value);
+        }
+    }
+    /**
+     * Registers a callback to be executed when the request results in an error.
+     * If an error is already present, the callback will be executed immediately.
+     *
+     * @param {(e: unknown) => void} callback - Callback function to handle errors.
+     */
+    function onError(callback) {
+        errorCallbacks.value.push(callback);
+        if (query.error.value !== undefined) {
+            callback(query.error.value);
+        }
+    }
+    /**
+     * Watches for changes in the query result and triggers result callbacks.
+     */
+    vue.watch(query.data, (newData) => {
+        if (newData !== undefined && newData !== null && isInitialized.value) {
+            resultCallbacks.value.forEach((cb) => cb(newData));
+        }
+    });
+    /**
+     * Watches for changes in query errors and triggers error callbacks.
+     */
+    vue.watch(query.error, (newError) => {
+        if (newError !== undefined && isInitialized.value) {
+            errorCallbacks.value.forEach((cb) => cb(newError));
+        }
+    });
+    /**
+     * Handles server-side prefetching for SSR.
+     * Ensures data is fetched before rendering on the server.
+     */
+    vue.onServerPrefetch(async () => {
+        if (queryOptionsRef.value?.server !== false) {
+            await query.suspense();
+            if (query.data.value != null) {
+                resultCallbacks.value.forEach((cb) => cb(query.data.value));
+            }
+        }
+    });
+    /**
+     * Ensures callbacks are executed after the component is mounted on the client-side.
+     */
+    vue.onMounted(() => {
+        isInitialized.value = true;
+        if (query.data.value != null) {
+            resultCallbacks.value.forEach((cb) => cb(query.data.value));
+        }
+        if (query.error.value !== undefined) {
+            errorCallbacks.value.forEach((cb) => cb(query.error.value));
+        }
+    });
+    return {
+        execute,
+        onResult,
+        onError,
+        ...query
+    };
+}
+
+let notified = false;
+/**
+ * Composable to manage breakpoints using Tailwind CSS and shared window resize listener.
+ *
+ * @returns {Object} An object containing the breakpoints and their states.
+ */
+function useBreakpoint() {
+    const breakpoints = core.useBreakpoints(core.breakpointsTailwind);
+    const current = breakpoints.current();
+    const active = breakpoints.active();
+    // Define breakpoints
+    const sm_S = breakpoints.smaller('sm');
+    const sm_SE = breakpoints.smallerOrEqual('sm');
+    const sm_GE = breakpoints.greaterOrEqual('sm');
+    const sm_md = breakpoints.between('sm', 'md');
+    const sm_xl = breakpoints.between('sm', 'xl');
+    const sm_2xl = breakpoints.between('sm', '2xl');
+    const md_S = breakpoints.smaller('md');
+    const md_SE = breakpoints.smallerOrEqual('md');
+    const md_GE = breakpoints.greaterOrEqual('md');
+    const md_lg = breakpoints.between('md', 'lg');
+    const md_xl = breakpoints.between('md', 'xl');
+    const md_2xl = breakpoints.between('md', '2xl');
+    const lg_S = breakpoints.smaller('lg');
+    const lg_SE = breakpoints.smallerOrEqual('lg');
+    const lg_GE = breakpoints.greaterOrEqual('lg');
+    const lg_xl = breakpoints.between('lg', 'xl');
+    const lg_2xl = breakpoints.between('lg', '2xl');
+    const xl_S = breakpoints.smaller('xl');
+    const xl_SE = breakpoints.smallerOrEqual('xl');
+    const xl_GE = breakpoints.greaterOrEqual('xl');
+    const xl_2xl = breakpoints.between('xl', '2xl');
+    const _2xl_S = breakpoints.smaller('2xl');
+    const _2xl_SE = breakpoints.smallerOrEqual('2xl');
+    const _2xl_GE = breakpoints.greaterOrEqual('2xl');
+    const reactiveBreakpoint = vue.ref('sm');
+    const isGreaterThanBreakpoint = breakpoints.greaterOrEqual(() => reactiveBreakpoint.value);
+    // Define device ranges
+    const mobile = breakpoints.smaller('md'); // <768px
+    const tablet = breakpoints.between('md', 'lg'); // 768px - 1024px
+    const laptop = breakpoints.between('lg', 'xl'); // 1024px - 1280px
+    const desktop = breakpoints.greaterOrEqual('xl'); // >=1280px
+    // Use VueUse for window size
+    const { width: windowWidth, height: windowHeight } = core.useWindowSize();
+    /**
+     * Logs a styled "chip" message to the console.
+     *
+     * @param {string} label - The label to display inside the chip.
+     * @param {string} backgroundColor - The background color of the chip.
+     * @param {string} textColor - The text color of the chip.
+     */
+    const logChip = (label, backgroundColor, textColor = 'white') => {
+        console.log(`%c ${label} `, `background-color: ${backgroundColor}; color: ${textColor}; border-radius: 16px; padding: 4px 8px;`);
+    };
+    // Singleton logic: Only notify once
+    const notifyOnce = () => {
+        if (notified)
+            return;
+        vue.watch([mobile, tablet, laptop, desktop], ([isMobile, isTablet, isLaptop, isDesktop]) => {
+            if (isMobile) {
+                logChip('Mobile', '#ff6b6b');
+            }
+            else if (isTablet) {
+                logChip('Tablet', '#4ecdc4');
+            }
+            else if (isLaptop) {
+                logChip('Laptop', '#1a535c');
+            }
+            else if (isDesktop) {
+                logChip('Desktop', '#f7fff7', 'black');
+            }
+            notified = true; // Mark as notified
+        }, { immediate: true });
+    };
+    notifyOnce(); // Ensure the notification happens only once globally
+    return {
+        current,
+        active,
+        sm_S,
+        sm_SE,
+        sm_GE,
+        sm_md,
+        sm_xl,
+        sm_2xl,
+        md_S,
+        md_SE,
+        md_GE,
+        md_lg,
+        md_xl,
+        md_2xl,
+        lg_S,
+        lg_SE,
+        lg_GE,
+        lg_xl,
+        lg_2xl,
+        xl_S,
+        xl_SE,
+        xl_GE,
+        xl_2xl,
+        _2xl_S,
+        _2xl_SE,
+        _2xl_GE,
+        isGreaterThanBreakpoint,
+        reactiveBreakpoint,
+        breakpointsTailwind: core.breakpointsTailwind,
+        windowWidth,
+        windowHeight,
+        mobile,
+        tablet,
+        laptop,
+        desktop,
+        breakpoints,
+    };
+}
+
+/**
+ * A composable function that filters objects based on a specific field and criteria.
+ *
+ * @param {Object[]} items - The list of objects to filter.
+ * @param {Object} filterConfig - Configuration for the filter, specifying the field, the data type to filter, and the criteria.
+ * @param {string} filterConfig.field - The field in the objects to filter.
+ * @param {string} filterConfig.type - The data type of the field ('date', 'string', 'number', 'boolean').
+ * @param {any} filterConfig.criteria - The criteria for filtering. Can be a date range, a string to search, a number range, or a boolean value.
+ *
+ * @returns {Object[]} - The filtered list of objects.
+ */
+function useFilter(items, filterConfig) {
+    // Ensure the filterConfig is correctly structured
+    const { field, type, criteria } = filterConfig;
+    // Define the filter functions
+    const filterByDate = (objects, field, { startDate, endDate }) => objects.filter(item => {
+        const date = new Date(item[field]);
+        return date >= new Date(startDate) && date <= new Date(endDate);
+    });
+    const filterByString = (objects, field, searchTerm) => {
+        const normalize = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+        const words = normalize(searchTerm).split(/\s+/).filter(Boolean);
+        return objects.filter(item => {
+            const normalizedFieldValue = normalize(item[field]);
+            return words.every(word => normalizedFieldValue.includes(word));
+        });
+    };
+    const filterByNumber = (objects, field, { min, max }) => objects.filter(item => {
+        const value = item[field];
+        return value >= min && value <= max;
+    });
+    const filterByBoolean = (objects, field, expectedValue) => objects.filter(item => item[field] === expectedValue);
+    // Apply the appropriate filter and return the filtered objects
+    const filteredObjects = vue.computed(() => {
+        if (!criteria ||
+            (type === 'date' && (!criteria.startDate || !criteria.endDate)) ||
+            (type === 'number' && (criteria.min == null || criteria.max == null)) ||
+            (type === 'boolean' && typeof criteria !== 'boolean')) {
+            return items; // Return all objects if criteria is not valid
+        }
+        // Apply the filter based on the type
+        switch (type) {
+            case 'date':
+                return filterByDate(items, field, criteria);
+            case 'string':
+                return filterByString(items, field, criteria);
+            case 'number':
+                return filterByNumber(items, field, criteria);
+            case 'boolean':
+                return filterByBoolean(items, field, criteria);
+            default:
+                return items;
+        }
+    });
+    return filteredObjects.value;
+}
+
+/**
+ * Composable to handle pagination logic.
+ *
+ * @param page - Reactive ref for the current page number.
+ * @param total - Reactive ref for total number of items.
+ * @param pageSize - Reactive ref for number of items per page.
+ * @returns An object with pagination controls.
+ */
+function usePagination(page, total, pageSize) {
+    // Calculate the total number of pages
+    const totalPages = vue.computed(() => Math.ceil(total.value / pageSize.value));
+    // Determine if the next page can be fetched
+    const canFetchNextPage = () => page.value < totalPages.value;
+    // Determine if the previous page can be fetched
+    const canFetchPreviousPage = () => page.value > 1;
+    return {
+        totalPages,
+        canFetchNextPage,
+        canFetchPreviousPage
+    };
+}
+
 /**
  * Custom composable for sorting products based on a selected criterion.
  * @param {Array} items - The array of products to sort.
@@ -2005,6 +2462,7 @@ exports.LOCALE_KEY = LOCALE_KEY;
 exports.LOCK_INFO_KEY = LOCK_INFO_KEY;
 exports.PROJ_CFG_KEY = PROJ_CFG_KEY;
 exports.ROLES_KEY = ROLES_KEY;
+exports.RestStd = RestStd;
 exports.TOKEN_KEY = TOKEN_KEY;
 exports.USER_INFO_KEY = USER_INFO_KEY;
 exports.addCustomKeyboardShortcut = addCustomKeyboardShortcut;
@@ -2012,6 +2470,7 @@ exports.addDays = addDays;
 exports.addDoubleClickListener = addDoubleClickListener;
 exports.addKeyListener = addKeyListener;
 exports.ageAtDate = ageAtDate;
+exports.axiosFetch = axiosFetch;
 exports.blobToFormData = blobToFormData;
 exports.bufferToBlob = bufferToBlob;
 exports.calculateAge = calculateAge;
@@ -2019,6 +2478,7 @@ exports.clickOutside = clickOutside;
 exports.compareObject = compareObject;
 exports.copyToClipboard = copyToClipboard;
 exports.countWords = countWords;
+exports.createFetch = createFetch;
 exports.createKeyMap = createKeyMap;
 exports.customShortcut = customShortcut;
 exports.daysBetween = daysBetween;
@@ -2112,7 +2572,11 @@ exports.toggleTabNavigation = toggleTabNavigation;
 exports.truncateString = truncateString;
 exports.unregisterKeyboardShortcuts = unregisterKeyboardShortcuts;
 exports.upperFirst = upperFirst;
+exports.useBreakpoint = useBreakpoint;
+exports.useFilter = useFilter;
+exports.usePagination = usePagination;
 exports.useSorter = useSorter;
+exports.useVueQuery = useVueQuery;
 exports.validateAlphanumeric = validateAlphanumeric;
 exports.validateLetters = validateLetters;
 exports.validateNumbers = validateNumbers;

package/dist/{vue-core.esm.js → index.mjs}

@@ -1,7 +1,136 @@
 import axios from 'axios';
-import '@tanstack/vue-query';
-import { computed } from 'vue';
-import { useTimeoutFn } from '@vueuse/core';
+import { useQuery } from '@tanstack/vue-query';
+import { ref, watch, onServerPrefetch, onMounted, computed } from 'vue';
+import { useBreakpoints, breakpointsTailwind, useWindowSize, useTimeoutFn } from '@vueuse/core';
+
+/**
+ * A standard REST API interface for handling basic CRUD operations.
+ * This class can be instantiated with a resource endpoint and a fetch composable for API requests.
+ */
+class RestStd {
+    static resource;
+    static fetchComposable;
+    /**
+     * Fetch a list of items from the server.
+     *
+     * @param params Query parameters for filtering the results.
+     * @param options Additional options for the fetch composable.
+     * @returns The result of the fetch composable (typically a promise).
+     */
+    static getMany(params, options = {}) {
+        return this.fetchComposable({
+            method: 'GET',
+            url: this.resource,
+            params,
+        }, options);
+    }
+    /**
+     * Fetch a single item by ID from the server.
+     *
+     * @param id The ID of the item to fetch.
+     * @param params Additional query parameters for the request.
+     * @param options Additional options for the fetch composable.
+     * @returns The result of the fetch composable (typically a promise).
+     */
+    static getOne(id, params, options = {}) {
+        return this.fetchComposable({
+            method: 'GET',
+            url: `${this.resource}/${id}`,
+            params,
+        }, options);
+    }
+    /**
+     * Create a new item on the server.
+     *
+     * @param data The data for the new item to create.
+     * @param options Additional options for the fetch composable.
+     * @returns The result of the fetch composable (typically a promise).
+     */
+    static create(data, options = {}) {
+        return this.fetchComposable({
+            method: 'POST',
+            url: this.resource,
+            data,
+        }, options);
+    }
+    /**
+     * Update an existing item on the server.
+     *
+     * @param id The ID of the item to update.
+     * @param data The updated data for the item.
+     * @param options Additional options for the fetch composable.
+     * @returns The result of the fetch composable (typically a promise).
+     */
+    static update(id, data, options = {}) {
+        return this.fetchComposable({
+            method: 'PUT',
+            url: `${this.resource}/${id}`,
+            data,
+        }, options);
+    }
+    /**
+     * Partially update an existing item on the server.
+     *
+     * @param id The ID of the item to update.
+     * @param data The updated data for the item.
+     * @param options Additional options for the fetch composable.
+     * @returns The result of the fetch composable (typically a promise).
+     */
+    static patch(id, data, options = {}) {
+        return this.fetchComposable({
+            method: 'PATCH',
+            url: `${this.resource}/${id}`,
+            data,
+        }, options);
+    }
+    /**
+     * Delete an item from the server.
+     *
+     * @param id The ID of the item to delete.
+     * @param options Additional options for the fetch composable.
+     * @returns The result of the fetch composable (typically a promise).
+     */
+    static delete(id, options = {}) {
+        return this.fetchComposable({
+            method: 'DELETE',
+            url: `${this.resource}/${id}`,
+        }, options);
+    }
+    /**
+     * Custom request method for more flexibility.
+     *
+     * @param method HTTP method (GET, POST, etc.).
+     * @param params Query parameters.
+     * @param data Request body data.
+     * @param token Authorization token (optional).
+     * @param options Additional options for the fetch composable.
+     * @returns The result of the fetch composable (typically a promise).
+     */
+    static customRequest(method, params, data, options = {}) {
+        return this.fetchComposable({
+            method: method,
+            url: this.resource,
+            params: params,
+            data: data,
+        }, options);
+    }
+}
+
+/**
+ * Custom composable function for making API requests with Axios.
+ *
+ * @template T The expected return type of the API request.
+ * @param {AxiosInstance} axios - The Axios instance for making HTTP requests.
+ * @param {AxiosRequestConfig} axiosRequest - Configuration for the Axios request.
+ * @returns {Promise<T>} A promise with the result of the API request.
+ */
+async function axiosFetch(axios, axiosRequest) {
+    return axios(axiosRequest)
+        .then(response => response.data)
+        .catch(error => {
+        throw error;
+    });
+}
 
 /**
  * AxiosService class encapsulates the Axios configuration and logic.
@@ -110,6 +239,334 @@ class AxiosService {
     }
 }
 
+/**
+ * Creates a fetchComposable for Axios requests with an optional custom instance.
+ * @param fetchComposable - The composable to use for the request (can be any fetch function).
+ * @param apiUrl - The base URL for the Axios instance.
+ * @param axiosInstance - An optional custom Axios instance to use for the request.
+ * @returns A function that handles the request using the provided composable.
+ */
+function createFetch(fetchComposable, apiUrl, axiosInstance) {
+    const instance = axiosInstance || new AxiosService(apiUrl).getAxiosInstance();
+    return (axiosRequestConfig, options) => {
+        return fetchComposable(instance, axiosRequestConfig, options);
+    };
+}
+
+/**
+ * Custom composable for integrating Axios requests with Vue Query.
+ *
+ * @template T - The type of data expected from the query.
+ * @param {AxiosInstance} axios - Axios instance used for making HTTP requests.
+ * @param {AxiosRequestConfig} axiosRequest - Initial Axios request configuration.
+ * @param {ExtendedQueryOptions<T>} [queryOptions] - Optional Vue Query options with server execution flag.
+ * @returns {object} Composable functions and query state for managing API requests.
+ */
+function useVueQuery(axios, axiosRequest, queryOptions) {
+    const key = ref([
+        queryOptions?.queryKey || `${axiosRequest.url}-${JSON.stringify(axiosRequest)}`
+    ]);
+    const axiosRequestRef = ref(axiosRequest);
+    const queryOptionsRef = ref(queryOptions);
+    const isInitialized = ref(false);
+    const errorCallbacks = ref([]);
+    const resultCallbacks = ref([]);
+    /**
+     * Vue Query instance for managing API requests.
+     */
+    const query = useQuery({
+        queryKey: key.value,
+        queryFn: async () => {
+            const response = await axios(axiosRequestRef.value);
+            return response.data;
+        },
+        ...(queryOptionsRef.value?.options ?? {})
+    });
+    /**
+     * Executes the query manually with optional new key and request parameters.
+     *
+     * @param {Array<any>} [newKey] - New query key to use.
+     * @param {object} [newRequestParams] - New request parameters to use.
+     * @param {ExtendedQueryOptions<T>} [newQueryOptions] - New Vue Query options to use.
+     */
+    function execute(newKey, newRequestParams, newQueryOptions) {
+        if (newKey) {
+            key.value = newKey;
+        }
+        if (newRequestParams) {
+            axiosRequestRef.value.data = newRequestParams;
+        }
+        if (newQueryOptions) {
+            queryOptionsRef.value = newQueryOptions;
+        }
+        query.refetch();
+    }
+    /**
+     * Registers a callback to be executed on successful request result.
+     * If data is already available, the callback will be executed immediately.
+     *
+     * @param {(data: T) => void} cb - Callback function to handle the result.
+     */
+    function onResult(cb) {
+        resultCallbacks.value.push(cb);
+        if (query.data.value !== undefined && query.data.value !== null) {
+            cb(query.data.value);
+        }
+    }
+    /**
+     * Registers a callback to be executed when the request results in an error.
+     * If an error is already present, the callback will be executed immediately.
+     *
+     * @param {(e: unknown) => void} callback - Callback function to handle errors.
+     */
+    function onError(callback) {
+        errorCallbacks.value.push(callback);
+        if (query.error.value !== undefined) {
+            callback(query.error.value);
+        }
+    }
+    /**
+     * Watches for changes in the query result and triggers result callbacks.
+     */
+    watch(query.data, (newData) => {
+        if (newData !== undefined && newData !== null && isInitialized.value) {
+            resultCallbacks.value.forEach((cb) => cb(newData));
+        }
+    });
+    /**
+     * Watches for changes in query errors and triggers error callbacks.
+     */
+    watch(query.error, (newError) => {
+        if (newError !== undefined && isInitialized.value) {
+            errorCallbacks.value.forEach((cb) => cb(newError));
+        }
+    });
+    /**
+     * Handles server-side prefetching for SSR.
+     * Ensures data is fetched before rendering on the server.
+     */
+    onServerPrefetch(async () => {
+        if (queryOptionsRef.value?.server !== false) {
+            await query.suspense();
+            if (query.data.value != null) {
+                resultCallbacks.value.forEach((cb) => cb(query.data.value));
+            }
+        }
+    });
+    /**
+     * Ensures callbacks are executed after the component is mounted on the client-side.
+     */
+    onMounted(() => {
+        isInitialized.value = true;
+        if (query.data.value != null) {
+            resultCallbacks.value.forEach((cb) => cb(query.data.value));
+        }
+        if (query.error.value !== undefined) {
+            errorCallbacks.value.forEach((cb) => cb(query.error.value));
+        }
+    });
+    return {
+        execute,
+        onResult,
+        onError,
+        ...query
+    };
+}
+
+let notified = false;
+/**
+ * Composable to manage breakpoints using Tailwind CSS and shared window resize listener.
+ *
+ * @returns {Object} An object containing the breakpoints and their states.
+ */
+function useBreakpoint() {
+    const breakpoints = useBreakpoints(breakpointsTailwind);
+    const current = breakpoints.current();
+    const active = breakpoints.active();
+    // Define breakpoints
+    const sm_S = breakpoints.smaller('sm');
+    const sm_SE = breakpoints.smallerOrEqual('sm');
+    const sm_GE = breakpoints.greaterOrEqual('sm');
+    const sm_md = breakpoints.between('sm', 'md');
+    const sm_xl = breakpoints.between('sm', 'xl');
+    const sm_2xl = breakpoints.between('sm', '2xl');
+    const md_S = breakpoints.smaller('md');
+    const md_SE = breakpoints.smallerOrEqual('md');
+    const md_GE = breakpoints.greaterOrEqual('md');
+    const md_lg = breakpoints.between('md', 'lg');
+    const md_xl = breakpoints.between('md', 'xl');
+    const md_2xl = breakpoints.between('md', '2xl');
+    const lg_S = breakpoints.smaller('lg');
+    const lg_SE = breakpoints.smallerOrEqual('lg');
+    const lg_GE = breakpoints.greaterOrEqual('lg');
+    const lg_xl = breakpoints.between('lg', 'xl');
+    const lg_2xl = breakpoints.between('lg', '2xl');
+    const xl_S = breakpoints.smaller('xl');
+    const xl_SE = breakpoints.smallerOrEqual('xl');
+    const xl_GE = breakpoints.greaterOrEqual('xl');
+    const xl_2xl = breakpoints.between('xl', '2xl');
+    const _2xl_S = breakpoints.smaller('2xl');
+    const _2xl_SE = breakpoints.smallerOrEqual('2xl');
+    const _2xl_GE = breakpoints.greaterOrEqual('2xl');
+    const reactiveBreakpoint = ref('sm');
+    const isGreaterThanBreakpoint = breakpoints.greaterOrEqual(() => reactiveBreakpoint.value);
+    // Define device ranges
+    const mobile = breakpoints.smaller('md'); // <768px
+    const tablet = breakpoints.between('md', 'lg'); // 768px - 1024px
+    const laptop = breakpoints.between('lg', 'xl'); // 1024px - 1280px
+    const desktop = breakpoints.greaterOrEqual('xl'); // >=1280px
+    // Use VueUse for window size
+    const { width: windowWidth, height: windowHeight } = useWindowSize();
+    /**
+     * Logs a styled "chip" message to the console.
+     *
+     * @param {string} label - The label to display inside the chip.
+     * @param {string} backgroundColor - The background color of the chip.
+     * @param {string} textColor - The text color of the chip.
+     */
+    const logChip = (label, backgroundColor, textColor = 'white') => {
+        console.log(`%c ${label} `, `background-color: ${backgroundColor}; color: ${textColor}; border-radius: 16px; padding: 4px 8px;`);
+    };
+    // Singleton logic: Only notify once
+    const notifyOnce = () => {
+        if (notified)
+            return;
+        watch([mobile, tablet, laptop, desktop], ([isMobile, isTablet, isLaptop, isDesktop]) => {
+            if (isMobile) {
+                logChip('Mobile', '#ff6b6b');
+            }
+            else if (isTablet) {
+                logChip('Tablet', '#4ecdc4');
+            }
+            else if (isLaptop) {
+                logChip('Laptop', '#1a535c');
+            }
+            else if (isDesktop) {
+                logChip('Desktop', '#f7fff7', 'black');
+            }
+            notified = true; // Mark as notified
+        }, { immediate: true });
+    };
+    notifyOnce(); // Ensure the notification happens only once globally
+    return {
+        current,
+        active,
+        sm_S,
+        sm_SE,
+        sm_GE,
+        sm_md,
+        sm_xl,
+        sm_2xl,
+        md_S,
+        md_SE,
+        md_GE,
+        md_lg,
+        md_xl,
+        md_2xl,
+        lg_S,
+        lg_SE,
+        lg_GE,
+        lg_xl,
+        lg_2xl,
+        xl_S,
+        xl_SE,
+        xl_GE,
+        xl_2xl,
+        _2xl_S,
+        _2xl_SE,
+        _2xl_GE,
+        isGreaterThanBreakpoint,
+        reactiveBreakpoint,
+        breakpointsTailwind,
+        windowWidth,
+        windowHeight,
+        mobile,
+        tablet,
+        laptop,
+        desktop,
+        breakpoints,
+    };
+}
+
+/**
+ * A composable function that filters objects based on a specific field and criteria.
+ *
+ * @param {Object[]} items - The list of objects to filter.
+ * @param {Object} filterConfig - Configuration for the filter, specifying the field, the data type to filter, and the criteria.
+ * @param {string} filterConfig.field - The field in the objects to filter.
+ * @param {string} filterConfig.type - The data type of the field ('date', 'string', 'number', 'boolean').
+ * @param {any} filterConfig.criteria - The criteria for filtering. Can be a date range, a string to search, a number range, or a boolean value.
+ *
+ * @returns {Object[]} - The filtered list of objects.
+ */
+function useFilter(items, filterConfig) {
+    // Ensure the filterConfig is correctly structured
+    const { field, type, criteria } = filterConfig;
+    // Define the filter functions
+    const filterByDate = (objects, field, { startDate, endDate }) => objects.filter(item => {
+        const date = new Date(item[field]);
+        return date >= new Date(startDate) && date <= new Date(endDate);
+    });
+    const filterByString = (objects, field, searchTerm) => {
+        const normalize = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+        const words = normalize(searchTerm).split(/\s+/).filter(Boolean);
+        return objects.filter(item => {
+            const normalizedFieldValue = normalize(item[field]);
+            return words.every(word => normalizedFieldValue.includes(word));
+        });
+    };
+    const filterByNumber = (objects, field, { min, max }) => objects.filter(item => {
+        const value = item[field];
+        return value >= min && value <= max;
+    });
+    const filterByBoolean = (objects, field, expectedValue) => objects.filter(item => item[field] === expectedValue);
+    // Apply the appropriate filter and return the filtered objects
+    const filteredObjects = computed(() => {
+        if (!criteria ||
+            (type === 'date' && (!criteria.startDate || !criteria.endDate)) ||
+            (type === 'number' && (criteria.min == null || criteria.max == null)) ||
+            (type === 'boolean' && typeof criteria !== 'boolean')) {
+            return items; // Return all objects if criteria is not valid
+        }
+        // Apply the filter based on the type
+        switch (type) {
+            case 'date':
+                return filterByDate(items, field, criteria);
+            case 'string':
+                return filterByString(items, field, criteria);
+            case 'number':
+                return filterByNumber(items, field, criteria);
+            case 'boolean':
+                return filterByBoolean(items, field, criteria);
+            default:
+                return items;
+        }
+    });
+    return filteredObjects.value;
+}
+
+/**
+ * Composable to handle pagination logic.
+ *
+ * @param page - Reactive ref for the current page number.
+ * @param total - Reactive ref for total number of items.
+ * @param pageSize - Reactive ref for number of items per page.
+ * @returns An object with pagination controls.
+ */
+function usePagination(page, total, pageSize) {
+    // Calculate the total number of pages
+    const totalPages = computed(() => Math.ceil(total.value / pageSize.value));
+    // Determine if the next page can be fetched
+    const canFetchNextPage = () => page.value < totalPages.value;
+    // Determine if the previous page can be fetched
+    const canFetchPreviousPage = () => page.value > 1;
+    return {
+        totalPages,
+        canFetchNextPage,
+        canFetchPreviousPage
+    };
+}
+
 /**
  * Custom composable for sorting products based on a selected criterion.
  * @param {Array} items - The array of products to sort.
@@ -1990,4 +2447,4 @@ function isValidHexNumber(hex) {
 // console.log(isValidHexNumber('1A3F')); // true
 // console.log(isValidHexNumber('GHIJ')); // false
 
-export { APP_LOCAL_CACHE_KEY, APP_SESSION_CACHE_KEY, AxiosService, CacheTypeEnum, ContentTypeEnum, ExceptionEnum, FileMetaTypes, ImageTypes, KeyCodeEnum, LOCALE_KEY, LOCK_INFO_KEY, PROJ_CFG_KEY, ROLES_KEY, TOKEN_KEY, USER_INFO_KEY, addCustomKeyboardShortcut, addDays, addDoubleClickListener, addKeyListener, ageAtDate, blobToFormData, bufferToBlob, calculateAge, clickOutside, compareObject, copyToClipboard, countWords, createKeyMap, customShortcut, daysBetween, daysToNextBirthday, debounce, debounceAsync, debounceAsyncValidator, debounceAsyncWithImmediate, debounceLeading, debounceLeadingTrailing, debounceTrailing, deepClone, deepEqual, deepMerge, detectKeyHold, disableCopy, disableF12Key, disableMouseButtons, disableRightClick, disableSpecificKeys, downloadBlob, enableMouseButtons, enableRightClick, enableSpecificKeys, exportToCSV, exportToExcel, exportToJSON, exportToText, exportToXML, filterObjectByKeys, flattenObject, formDataToObject, formatDate, generateRandomString, getEndOfMonth, getObjectDifferences, getObjectKeys, getQueryParam, getStartOfMonth, hasNestedProperties, isEmptyObject, isLeapYear, isStrongPassword, isValidAge, isValidCreditCard, isValidDate, isValidEmail, isValidExpiryDate, isValidHexColor, isValidHexColorAlpha, isValidHexNumber, isValidIP, isValidPhoneNumber, isValidSSN, isValidTime, isValidURL, isValidUsername, isValidZIP, lowerFirst, objectToFormData, objectToFormDataEnhanced, objectToQueryString, openWindow, parseDate, proxyToPlainObject, readFileAsDataURL, readFileAsText, registerKeyboardShortcuts, removeAccent, removeClickOutside, removeCustomKeyboardShortcut, removeCustomShortcuts, removeDoubleClickListener, removeEmptyProperties, removeKeyListeners, replaceAll, reverseString, safeGet, screenEnum, screenMap, scrollToTop, simulateKeyPress, sizeEnum, stopDetectingKeyHold, stringToBlob, subtractDays, throttle, toCamelCase, toKebabCase, toggleTabNavigation, truncateString, unregisterKeyboardShortcuts, upperFirst, useSorter, validateAlphanumeric, validateLetters, validateNumbers };
+export { APP_LOCAL_CACHE_KEY, APP_SESSION_CACHE_KEY, AxiosService, CacheTypeEnum, ContentTypeEnum, ExceptionEnum, FileMetaTypes, ImageTypes, KeyCodeEnum, LOCALE_KEY, LOCK_INFO_KEY, PROJ_CFG_KEY, ROLES_KEY, RestStd, TOKEN_KEY, USER_INFO_KEY, addCustomKeyboardShortcut, addDays, addDoubleClickListener, addKeyListener, ageAtDate, axiosFetch, blobToFormData, bufferToBlob, calculateAge, clickOutside, compareObject, copyToClipboard, countWords, createFetch, createKeyMap, customShortcut, daysBetween, daysToNextBirthday, debounce, debounceAsync, debounceAsyncValidator, debounceAsyncWithImmediate, debounceLeading, debounceLeadingTrailing, debounceTrailing, deepClone, deepEqual, deepMerge, detectKeyHold, disableCopy, disableF12Key, disableMouseButtons, disableRightClick, disableSpecificKeys, downloadBlob, enableMouseButtons, enableRightClick, enableSpecificKeys, exportToCSV, exportToExcel, exportToJSON, exportToText, exportToXML, filterObjectByKeys, flattenObject, formDataToObject, formatDate, generateRandomString, getEndOfMonth, getObjectDifferences, getObjectKeys, getQueryParam, getStartOfMonth, hasNestedProperties, isEmptyObject, isLeapYear, isStrongPassword, isValidAge, isValidCreditCard, isValidDate, isValidEmail, isValidExpiryDate, isValidHexColor, isValidHexColorAlpha, isValidHexNumber, isValidIP, isValidPhoneNumber, isValidSSN, isValidTime, isValidURL, isValidUsername, isValidZIP, lowerFirst, objectToFormData, objectToFormDataEnhanced, objectToQueryString, openWindow, parseDate, proxyToPlainObject, readFileAsDataURL, readFileAsText, registerKeyboardShortcuts, removeAccent, removeClickOutside, removeCustomKeyboardShortcut, removeCustomShortcuts, removeDoubleClickListener, removeEmptyProperties, removeKeyListeners, replaceAll, reverseString, safeGet, screenEnum, screenMap, scrollToTop, simulateKeyPress, sizeEnum, stopDetectingKeyHold, stringToBlob, subtractDays, throttle, toCamelCase, toKebabCase, toggleTabNavigation, truncateString, unregisterKeyboardShortcuts, upperFirst, useBreakpoint, useFilter, usePagination, useSorter, useVueQuery, validateAlphanumeric, validateLetters, validateNumbers };

package/dist/rest/RestStd.d.ts

@@ -2,7 +2,7 @@
  * A standard REST API interface for handling basic CRUD operations.
  * This class can be instantiated with a resource endpoint and a fetch composable for API requests.
  */
-export default class RestStd {
+export declare class RestStd {
     static resource: string;
     static fetchComposable: Function;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arex95/vue-core",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Opinionated Vue Core",
   "main": "dist/index.js",
   "module": "dist/index.mjs",