@creopse/vue 0.0.14 → 0.0.15

package/dist/style.css

@@ -1 +1 @@
-.reset-styles[data-v-f40657c2]{all:unset!important}.fade-enter-active[data-v-30b5e62e],.fade-leave-active[data-v-30b5e62e]{transition:opacity .5s ease}.fade-enter-from[data-v-30b5e62e],.fade-leave-to[data-v-30b5e62e]{opacity:0}.slide-fade-enter-active[data-v-30b5e62e]{transition:all .3s ease-out}.slide-fade-leave-active[data-v-30b5e62e]{transition:all .8s cubic-bezier(1,.5,.8,1)}.slide-fade-enter-from[data-v-30b5e62e],.slide-fade-leave-to[data-v-30b5e62e]{transform:translate(20px);opacity:0}.bounce-enter-active[data-v-30b5e62e]{animation:bounce-in-30b5e62e .5s}.bounce-leave-active[data-v-30b5e62e]{animation:bounce-in-30b5e62e .5s reverse}@keyframes bounce-in-30b5e62e{0%{transform:scale(0)}50%{transform:scale(1.25)}to{transform:scale(1)}}
+.reset-styles[data-v-9e4f90fa]{all:unset!important}.fade-enter-active[data-v-30b5e62e],.fade-leave-active[data-v-30b5e62e]{transition:opacity .5s ease}.fade-enter-from[data-v-30b5e62e],.fade-leave-to[data-v-30b5e62e]{opacity:0}.slide-fade-enter-active[data-v-30b5e62e]{transition:all .3s ease-out}.slide-fade-leave-active[data-v-30b5e62e]{transition:all .8s cubic-bezier(1,.5,.8,1)}.slide-fade-enter-from[data-v-30b5e62e],.slide-fade-leave-to[data-v-30b5e62e]{transform:translate(20px);opacity:0}.bounce-enter-active[data-v-30b5e62e]{animation:bounce-in-30b5e62e .5s}.bounce-leave-active[data-v-30b5e62e]{animation:bounce-in-30b5e62e .5s reverse}@keyframes bounce-in-30b5e62e{0%{transform:scale(0)}50%{transform:scale(1.25)}to{transform:scale(1)}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@creopse/vue",
   "description": "Creopse Vue Toolkit",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "private": false,
   "author": "Noé Gnanih <noegnanih@gmail.com>",
   "license": "MIT",
@@ -32,12 +32,19 @@
     "lint": "eslint 'src/**/*.{ts,vue}'"
   },
   "peerDependencies": {
+    "@inertiajs/core": "^2.0.0",
+    "@inertiajs/vue3": "^2.0.0",
     "vue": "^3.5.17"
   },
   "dependencies": {
-    "@creopse/utils": "^0.0.10"
+    "@creopse/utils": "^0.0.11",
+    "@vueuse/core": "^14.1.0",
+    "lodash.clonedeep": "^4.5.0"
   },
   "devDependencies": {
+    "@inertiajs/core": "^2.1.6",
+    "@inertiajs/vue3": "^2.1.6",
+    "@types/lodash.clonedeep": "^4.5.9",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
@@ -50,6 +57,7 @@
     "unplugin-auto-import": "^19.3.0",
     "unplugin-vue-components": "^28.8.0",
     "vite": "^7.0.4",
+    "vue": "^3.5.21",
     "vue-tsc": "^2.2.12"
   },
   "repository": {

package/types/components/widgets/Image.vue.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties } from 'vue';
+interface Props {
+    src: string;
+    alt?: string;
+    width?: string | number;
+    height?: string | number;
+    title?: string;
+    loading?: 'lazy' | 'eager';
+    style?: CSSProperties;
+    size?: 'small' | 'medium' | 'large' | 'original';
+    sync?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: "small" | "medium" | "large" | "original";
+    style: CSSProperties;
+    title: string;
+    alt: string;
+    width: string | number;
+    height: string | number;
+    loading: "lazy" | "eager";
+    sync: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/types/composables/api.d.ts

@@ -0,0 +1,48 @@
+import type { Payload } from '@/types/api';
+/**
+ * This composable is used to make API requests.
+ *
+ * @function useApi
+ * @returns {Object} An object containing the following methods:
+ *  - `request`: Makes an API request with the given payload.
+ *  - `addItem`: Adds an item to the API.
+ *  - `deleteItem`: Deletes an item from the API.
+ *  - `updateItem`: Updates an item in the API.
+ *  - `getAllItems`: Gets all items from the API.
+ *  - `getItem`: Gets an item from the API.
+ *  - `handleError`: Handles an error from the API.
+ */
+export declare const useApi: () => {
+    request: (payload: Payload) => Promise<any>;
+    getItem: (payload: Payload) => Promise<{
+        success: boolean;
+        failure: boolean;
+        result: any;
+        error: any;
+    }>;
+    addItem: (payload: Payload) => Promise<{
+        success: boolean;
+        failure: boolean;
+        result: any;
+        error: any;
+    }>;
+    updateItem: (payload: Payload) => Promise<{
+        success: boolean;
+        failure: boolean;
+        result: any;
+        error: any;
+    }>;
+    deleteItem: (payload: Payload) => Promise<{
+        success: boolean;
+        failure: boolean;
+        result: any;
+        error: any;
+    }>;
+    getAllItems: (payload: Payload) => Promise<{
+        success: boolean;
+        failure: boolean;
+        result: any;
+        error: any;
+    }>;
+    handleError: (error: any) => void;
+};

package/types/composables/config.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Returns the plugin configuration object.
+ *
+ * This composable is used to inject the plugin configuration
+ * into your Vue components.
+ *
+ * @returns {PluginConfig} the plugin configuration object
+ * @throws {Error} if the plugin is not installed
+ */
+export declare const useConfig: () => {
+    apiBaseUrl: string;
+    apiUrl: string;
+    apiRequestHeaders: {
+        'X-API-Key': string;
+    };
+    debug: boolean;
+    appUrl: string;
+    xApiKey: string;
+    encryptionKey: string;
+    langKey: string;
+};

package/types/composables/content.d.ts

@@ -0,0 +1,54 @@
+import type { AppInformationKey, ContentModelItemModel, ContentModelModel, MenuItemGroupModel, MenuItemModel, MenuModel, NewsArticleModel, NewsCategoryModel, NewsTagModel, PageModel, SectionModel, SettingType, SharedProps } from '@creopse/utils';
+import type { ErrorBag, Errors, PageProps } from '@inertiajs/core';
+/**
+ * A composable that provides a set of functions and properties for
+ * easily accessing and manipulating page data, content models, menus,
+ * menu items, and more.
+ *
+ * @returns {Object}
+ */
+export declare const useContent: () => {
+    logo: globalThis.ComputedRef<string>;
+    icon: globalThis.ComputedRef<string>;
+    page: import("@inertiajs/core").Page<SharedProps & PageProps>;
+    pageData: PageModel | null;
+    newsArticle: NewsArticleModel | undefined;
+    newsCategory: NewsCategoryModel | undefined;
+    newsTag: NewsTagModel | undefined;
+    contentModelItem: ContentModelItemModel | undefined;
+    getProps: () => PageProps & SharedProps & {
+        errors: Errors & ErrorBag;
+    };
+    getMenu: (name: string, filterByIsActive?: boolean) => MenuModel | undefined;
+    getMenuByLocation: (name: string, filterByIsActive?: boolean) => MenuModel | undefined;
+    getMenuItems: (name: string, filterByIsVisible?: boolean) => MenuItemModel[] | undefined;
+    getMenuItemById: (id: number) => MenuItemModel | undefined;
+    getMenuItemsByLocation: (name: string, filterByIsVisible?: boolean) => MenuItemModel[] | undefined;
+    getMenuGroups: (name: string, byLocation?: boolean, filterByIsVisible?: boolean) => MenuItemGroupModel[];
+    getMenuItemsByGroup: (name: string, groupId: number, byLocation?: boolean, filterByIsVisible?: boolean) => MenuItemModel[] | undefined;
+    getMenuGroupedItems: (name: string, byLocation?: boolean, filterByIsVisible?: boolean) => {
+        group: MenuItemGroupModel;
+        items: MenuItemModel[] | undefined;
+    }[];
+    getMenuUngroupedItems: (name: string, byLocation?: boolean, filterByIsVisible?: boolean) => MenuItemModel[] | undefined;
+    getSectionData: (key?: string) => object | any | null;
+    getSectionSettings: (key: string | null | undefined) => object | any | null;
+    getSectionSettingsGroup: (key: string | null | undefined, group: string) => object | any | null;
+    getSectionSetting: (key: string | null | undefined, group: string, name: string) => object | any | null;
+    getAnySectionData: (sectionSlug: string, pageSlug: string, linkId?: string) => Promise<any>;
+    getSectionsInOrder: () => SectionModel[];
+    getFinalPageSections: () => SectionModel[];
+    getSectionRootData: (key?: string) => any;
+    getComponents: () => Record<string, any>;
+    getContentModel: (name: string) => ContentModelModel | undefined;
+    getContentModelItems: (name: string, filterByIsActive?: boolean) => Promise<ContentModelItemModel[]>;
+    getPaginatedContentModelItems: (name: string, pageSize: number, filterByIsActive?: boolean) => Promise<{
+        items: ContentModelItemModel[];
+        total: number;
+        currentPage: number;
+    }>;
+    getAppInformationValue: (key: AppInformationKey, type?: SettingType) => any;
+    appAccentColor: globalThis.ComputedRef<string>;
+    appPrimaryColor: globalThis.ComputedRef<string>;
+    appSecondaryColor: globalThis.ComputedRef<string>;
+};

package/types/composables/helper.d.ts

@@ -0,0 +1,32 @@
+import { type Language, MenuItemModel } from '@creopse/utils';
+/**
+ * Returns a collection of helper functions and values.
+ *
+ * @returns {Object}
+ */
+export declare const useHelper: () => {
+    is2XlScreen: globalThis.ComputedRef<boolean>;
+    isXlScreen: globalThis.ComputedRef<boolean>;
+    isLgScreen: globalThis.ComputedRef<boolean>;
+    isMdScreen: globalThis.ComputedRef<boolean>;
+    isSmScreen: globalThis.ComputedRef<boolean>;
+    getTranslation: (data: any) => string;
+    getLangageLabel: (value: string) => string | undefined;
+    getLanguageValue: (label: string) => string | undefined;
+    getLinkCursorClass: (url: string) => "tw:cursor-default" | "tw:cursor-pointer";
+    ckEditorToolbarItems: string[];
+    displayFormErrors: (errors: any, displayError: (message: string) => void) => void;
+    resolveHtmlLinks: (data: string | null | undefined) => string;
+    pickByTheme: (lightVal: string | number | null, darkVal: string | number | null) => string | number | null;
+    resolveUrl: (path: string) => string;
+    updateLang: (val: string, reload?: boolean, updateUserPrefs?: boolean) => Promise<void>;
+    languages: Language[];
+    getImage: (path: string, size?: "small" | "medium" | "large" | "original") => Promise<string>;
+    fileUrl: (path: string) => string;
+    currentRoutePath: globalThis.ComputedRef<string>;
+    openLink: (str: string) => void;
+    openMenu: (menu?: MenuItemModel) => void;
+    getMenuHref: (menu: MenuItemModel) => string;
+    rHtml: (data: string | null | undefined) => string;
+    tr: (data: any) => string;
+};

package/types/composables/newsletter.d.ts

@@ -0,0 +1,29 @@
+/**
+ * A composable that exposes functions to subscribe the user to the newsletter using
+ * email or phone.
+ *
+ * @returns An object containing the subscribeEmail, subscribePhone, and isLoading
+ * properties.
+ *
+ * @remarks
+ * The subscribeEmail and subscribePhone functions are asynchronous and return nothing.
+ * The isLoading property is a boolean that indicates whether a subscription request is
+ * being processed.
+ *
+ * The subscribeEmail function takes an email address and an optional success callback.
+ * The subscribePhone function takes a phone number and an optional success callback.
+ *
+ * If the request is successful, the user will be subscribed to the newsletter and the
+ * success callback will be called. If the request fails, an appropriate error message
+ * will be displayed to the user.
+ *
+ * The error messages are as follows:
+ * - If the request is invalid, the form errors will be displayed.
+ * - If the request is valid but results in an error, a generic error message will be
+ * displayed.
+ */
+export declare const useNewsletter: () => {
+    subscribePhone: (phone: string, successCallback?: (() => void) | undefined, errorCallback?: ((errorData: any) => void) | undefined) => Promise<void>;
+    subscribeEmail: (email: string, successCallback?: (() => void) | undefined, errorCallback?: ((errorData: any) => void) | undefined) => Promise<void>;
+    isLoading: globalThis.Ref<boolean, boolean>;
+};

package/types/composables/props.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A composable that returns the props of the page.
+ *
+ * It injects the PropsManager symbol and returns the props of the page.
+ *
+ * @throws {Error} if the plugin is not installed
+ * @returns {Record<string, any>} the props of the page
+ */
+export declare const useProps: () => {
+    readonly [x: string]: any;
+};

package/types/composables/user-preference.d.ts

@@ -0,0 +1,26 @@
+import { Bool, type UserPrefs } from '@creopse/utils';
+/**
+ * A composable that exposes the default user preferences.
+ *
+ * @returns An object containing the `defaultPrefs` property, which is a reactive
+ * ref to the default user preferences.
+ *
+ * The `defaultPrefs` object contains the following properties:
+ *
+ * - `inAppNotifEnabled`: A boolean indicating whether in-app notifications are
+ * enabled by default.
+ * - `emailNotifEnabled`: A boolean indicating whether email notifications are
+ * enabled by default.
+ * - `locale`: The user's preferred locale.
+ */
+export declare const useUserPreference: () => {
+    defaultPrefs: globalThis.Ref<{
+        inAppNotifEnabled?: Bool | undefined;
+        emailNotifEnabled?: Bool | undefined;
+        locale?: string | undefined;
+    }, UserPrefs | {
+        inAppNotifEnabled?: Bool | undefined;
+        emailNotifEnabled?: Bool | undefined;
+        locale?: string | undefined;
+    }>;
+};

package/types/core/props-manager.d.ts

@@ -0,0 +1,14 @@
+declare class PropsManager {
+    private state;
+    constructor(initialProps: Record<string, any>);
+    update(payload: Record<string, any>): void;
+    getState(): {
+        readonly props: {
+            readonly [x: string]: any;
+        };
+    };
+    sync(newProps: Record<string, any>): void;
+    private deepMerge;
+    private isObject;
+}
+export default PropsManager;

package/types/core/symbols.d.ts

@@ -0,0 +1,4 @@
+declare const PropsSymbol: unique symbol;
+declare const ConfigSymbol: unique symbol;
+declare const ResolveSectionsSymbol: unique symbol;
+export { PropsSymbol, ConfigSymbol, ResolveSectionsSymbol };

package/types/index.d.ts

@@ -1,13 +1,25 @@
 import type { App } from 'vue';
-import RootContainer from './components/core/RootContainer.vue';
+import RootContainer from './components/RootContainer.vue';
 import AsyncImg from './components/widgets/AsyncImg.vue';
 import CustomTransition from './components/widgets/CustomTransition.vue';
+import Image from './components/widgets/Image.vue';
 import MountedTeleport from './components/widgets/MountedTeleport.vue';
 import ReadMore from './components/widgets/ReadMore.vue';
 import StickyBottom from './components/widgets/StickyBottom.vue';
 import StickyTop from './components/widgets/StickyTop.vue';
+import PropsManager from './core/props-manager';
+import type { PluginOptions } from './types/plugin';
 declare const plugin: {
-    install(app: App): void;
+    install(app: App, options: PluginOptions): void;
 };
-export { RootContainer, CustomTransition, MountedTeleport, StickyBottom, StickyTop, ReadMore, AsyncImg, };
+export { useApi } from './composables/api';
+export { useProps } from './composables/props';
+export { useConfig } from './composables/config';
+export { useHelper } from './composables/helper';
+export { useContent } from './composables/content';
+export { useNewsletter } from './composables/newsletter';
+export { useUserPreference } from './composables/user-preference';
+export type { PropsManager };
+export { RootContainer, CustomTransition, MountedTeleport, StickyBottom, StickyTop, ReadMore, AsyncImg, Image, };
+export type { PluginOptions };
 export default plugin;

package/types/types/api.d.ts

@@ -0,0 +1,9 @@
+export type Method = 'get' | 'post' | 'put' | 'delete';
+export interface Payload {
+    method?: Method;
+    routeBase?: string;
+    params?: object;
+    data?: object;
+    url?: string;
+    id?: string;
+}

package/types/types/plugin.d.ts

@@ -0,0 +1,15 @@
+export interface PluginConfig {
+    debug: boolean;
+    appUrl: string;
+    xApiKey: string;
+    encryptionKey: string;
+    langKey: string;
+}
+export interface PluginOptions {
+    initialProps: Record<string, any>;
+    router?: {
+        on: (event: string, callback: (e: any) => void) => void;
+    };
+    resolveSections: () => Record<string, unknown>;
+    config: PluginConfig;
+}