@jsg-developer/vue-pack 0.0.1

package/dist/types/configs/types/props.types.d.ts

@@ -0,0 +1,355 @@
+import { SupportedLanguage, Errors, Schema, SubmitAuthOptionMap, Item, DataKeyConfig, DateOnly, DateTimeString, TimeOnly, ImageType, XOR } from '../../index';
+export interface SchemaGroupRendererProps {
+    id: string;
+    label?: string;
+    typeDesign: 'cekbox' | 'dropdown' | 'select';
+    options: Record<string, Schema>;
+    optionsLabels?: Record<string, string>;
+    withValue?: boolean;
+    formData: Record<string, any>;
+    required?: boolean;
+    disabled?: boolean;
+    errors: Errors;
+    error?: string;
+    lang?: SupportedLanguage;
+}
+export interface ArrayObjectProps {
+    id?: string;
+    label?: string;
+    modelValue?: any[];
+    disabled?: boolean;
+    schema: Schema;
+    error?: string;
+    lang?: SupportedLanguage;
+}
+export interface SingleObjectProps {
+    id?: string;
+    label?: string;
+    disabled?: boolean;
+    schema: Schema;
+    formData: Record<string, any>;
+    required?: boolean;
+    errors: Errors;
+    lang?: SupportedLanguage;
+}
+export interface SelectDropdownProps {
+    id?: string;
+    label: string;
+    optionsIsNumber?: boolean;
+    placeholder?: string;
+    options: (string | number)[];
+    optionsView: (string | number)[];
+    required?: boolean;
+    disabled?: boolean;
+    modelValue?: string | number | null;
+    error?: string;
+    withCreate?: {
+        DB_NAME?: string;
+        schema: Schema;
+        endPoint: string;
+        validation?: Record<string, any>;
+        submitOption?: SubmitAuthOptionMap<Item>;
+        keys?: DataKeyConfig;
+    };
+    lang?: SupportedLanguage;
+}
+export interface TextInputProps {
+    id?: string;
+    label: string;
+    placeholder?: string;
+    modelValue?: string | number;
+    error?: string | string[];
+    disabled?: boolean;
+    validate?: {
+        duplicate?: (string | number)[];
+        minLength?: number;
+        maxLength?: number;
+        pattern?: string;
+    };
+    lang?: SupportedLanguage;
+}
+export interface DateInputProps {
+    id?: string;
+    label: string;
+    placeholder?: string;
+    modelValue?: DateOnly;
+    error?: string | string[];
+    disabled?: boolean;
+    validate?: {
+        minDate?: DateOnly;
+        maxDate?: DateOnly;
+    };
+    lang?: SupportedLanguage;
+}
+export interface TimeInputProps {
+    id?: string;
+    label: string;
+    placeholder?: string;
+    modelValue?: TimeOnly;
+    error?: string | string[];
+    disabled?: boolean;
+    validate?: {
+        minTime?: TimeOnly;
+        maxTime?: TimeOnly;
+    };
+    lang?: SupportedLanguage;
+}
+export interface DateTimeInputProps {
+    id?: string;
+    label: string;
+    placeholder?: string;
+    modelValue?: DateTimeString;
+    error?: string | string[];
+    disabled?: boolean;
+    validate?: {
+        minDateTime?: DateTimeString;
+        maxDateTime?: DateTimeString;
+    };
+    lang?: SupportedLanguage;
+}
+export interface NumberInputProps {
+    id?: string;
+    label: string;
+    placeholder?: string;
+    modelValue?: string | number;
+    error?: string | string[];
+    disabled?: boolean;
+    validate?: {
+        min?: number;
+        max?: number;
+        integer?: boolean;
+        duplicate?: (string | number)[];
+    };
+    lang?: SupportedLanguage;
+}
+export interface EmailInputProps {
+    id?: string;
+    label: string;
+    placeholder?: string;
+    modelValue?: string | number;
+    error?: string | string[];
+    disabled?: boolean;
+    validate?: {
+        duplicate?: (string | number)[];
+    };
+    lang?: SupportedLanguage;
+}
+export interface PasswordInputProps {
+    id?: string;
+    label: string;
+    placeholder?: string;
+    modelValue?: string | number;
+    error?: string | string[];
+    disabled?: boolean;
+    validate?: {
+        minLength?: number;
+        maxLength?: number;
+        requireUppercase?: boolean;
+        requireLowercase?: boolean;
+        requireNumber?: boolean;
+        requireSpecialChar?: boolean;
+    };
+    lang?: SupportedLanguage;
+}
+export interface BaseInputProps {
+    id?: string;
+    label: string;
+    type: string;
+    placeholder?: string;
+    modelValue?: string | number;
+    error?: string | string[];
+    disabled?: boolean;
+    validate?: {
+        text?: {
+            duplicate: (string | number)[];
+            minLength?: number;
+            maxLength?: number;
+            pattern?: string;
+        };
+        number?: {
+            min?: number;
+            max?: number;
+            integer?: boolean;
+            duplicate: (string | number)[];
+        };
+        email?: {
+            duplicate?: (string | number)[];
+        };
+        password?: {
+            minLength?: number;
+            maxLength?: number;
+            requireUppercase?: boolean;
+            requireLowercase?: boolean;
+            requireNumber?: boolean;
+            requireSpecialChar?: boolean;
+        };
+    };
+    lang?: SupportedLanguage;
+}
+export interface RichTextProps {
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    modelValue?: string;
+    error?: string | string[];
+    disabled?: boolean;
+    lang?: SupportedLanguage;
+    validate?: {
+        minLength?: number;
+        maxLength?: number;
+    };
+}
+export interface TextAreaProps {
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    modelValue?: string;
+    error?: string | string[];
+    disabled?: boolean;
+    lang?: SupportedLanguage;
+    validate?: {
+        minLength?: number;
+        maxLength?: number;
+    };
+}
+export interface FileInputProps {
+    id?: string;
+    label?: string;
+    modelValue?: File | null | string;
+    disabled?: boolean;
+    validate?: {
+        maxSize?: number;
+        allowedTypes?: string[];
+    };
+    lang?: string;
+    error?: string | string[];
+}
+export interface FileArrayInputProps {
+    id?: string;
+    label?: string;
+    modelValue?: (File | string)[];
+    disabled?: boolean;
+    validate?: {
+        maxFiles?: number;
+        maxSize?: number;
+        allowedTypes?: string[];
+    };
+    lang?: string;
+    error?: string | string[];
+}
+export interface ImageInputProps {
+    id?: string;
+    label?: string;
+    modelValue?: File | null | string;
+    previewAlt?: string;
+    disabled?: boolean;
+    error?: string | string[];
+    previewImage?: string;
+    validate?: {
+        maxSize?: number;
+        ratio?: {
+            Width: number;
+            Height: number;
+        };
+        pixel?: XOR<{
+            maxWidth?: number;
+            maxHeight?: number;
+            minWidth?: number;
+            minHeight?: number;
+        }, {
+            width?: number;
+            height?: number;
+        }>;
+        allowedTypes?: ImageType[];
+    };
+    watermark?: {
+        url: string;
+        position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'full';
+        transparant: number;
+    };
+    lang?: SupportedLanguage;
+}
+export interface ImageArrayInputProps {
+    id?: string;
+    label?: string;
+    modelValue?: (File | string)[];
+    previewAlt?: string;
+    disabled?: boolean;
+    error?: string | string[];
+    previewImages?: string[];
+    validate?: {
+        maxFiles?: number;
+        maxSize?: number;
+        ratio?: {
+            Width: number;
+            Height: number;
+        };
+        pixel?: XOR<{
+            maxWidth?: number;
+            maxHeight?: number;
+            minWidth?: number;
+            minHeight?: number;
+        }, {
+            width?: number;
+            height?: number;
+        }>;
+        allowedTypes?: ImageType[];
+    };
+    watermark?: {
+        url: string;
+        position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'full';
+        transparant: number;
+    };
+    lang?: SupportedLanguage;
+}
+export interface TagInputProps {
+    id?: string;
+    label: string;
+    placeholder?: string;
+    modelValue?: string[];
+    error?: string | string[];
+    disabled?: boolean;
+    lang?: SupportedLanguage;
+    validate?: {
+        min?: number;
+        max?: number;
+    };
+}
+export interface ToggleInputProps {
+    id?: string;
+    label: string;
+    modelValue?: boolean;
+    disabled?: boolean;
+    lang?: SupportedLanguage;
+}
+export interface UrlInputProps {
+    id?: string;
+    label: string;
+    placeholder?: string;
+    modelValue?: string;
+    error?: string;
+    validate?: boolean;
+    disabled?: boolean;
+    lang?: SupportedLanguage;
+}
+export interface FromModalProps {
+    id?: number | null;
+    initialData?: Record<string, any>;
+    schema: Schema;
+    isUpdate?: boolean;
+    lang?: SupportedLanguage;
+}
+export interface ColorPickerProps {
+    id?: string;
+    selectedColors?: string[];
+    modelValue?: string[] | string;
+    single?: boolean;
+    error?: string[];
+    label?: string;
+    disabled?: boolean;
+    validate?: {
+        min?: number;
+        max?: number;
+    };
+    lang?: SupportedLanguage;
+}

package/dist/types/configs/types/schema.types.d.ts

@@ -0,0 +1,20 @@
+import { TextField, ImageField, ColorField, EmailField, PasswordField, NumberField, SelectField, ArrayObjectField, OptionGroupField, RichTextField, TagField, UrlField, ToggleField, ImageArrayField, FileArrayField, ObjectField, TextAreaField, DateField, TimeField, DateTimeField, FileField, XOR } from '../../index';
+export type Field = TextField | ImageArrayField | NumberField | FileArrayField | ImageField | ColorField | SelectField | EmailField | PasswordField | ArrayObjectField | UrlField | ToggleField | DateField | ObjectField | TimeField | RichTextField | DateTimeField | TagField | FileField | TextAreaField | OptionGroupField;
+export type Schema = Record<string, Field>;
+export type FormData = Record<string, any>;
+export type Errors = Record<string, any>;
+export type DataView = Record<string, string | dataProperty>;
+export interface dataProperty {
+    valueKey: string;
+    connect?: XOR<{
+        withDB: {
+            DB_NAME: string;
+            valueKey: string;
+        };
+    }, {
+        withFetch: {
+            url: string;
+            valueKey: string;
+        };
+    }>;
+}

package/dist/types/configs/types/submit-options.types.d.ts

@@ -0,0 +1,31 @@
+import { ZodType } from 'zod';
+export type SubmitMode = 'create' | 'get' | 'update' | 'delete' | 'deleteMany';
+export interface errorMessage {
+    status: number;
+    message: string;
+}
+export interface SubmitOptions<T> {
+    data?: T;
+    oldData?: T;
+    validation?: ZodType<T>;
+    endpoint: string;
+    mode: SubmitMode;
+    db?: string;
+    deleteDataDB?: boolean;
+    authType: 'cookie' | 'bearer' | 'none' | 'custom';
+    token?: string;
+    customHeaders?: Record<string, string>;
+}
+export type SubmitAuthOptions<T> = {
+    authType?: 'cookie' | 'bearer' | 'none' | 'custom';
+    token?: string;
+    customHeaders?: Record<string, string>;
+};
+export interface SubmitAuthOptionMap<T = any> {
+    global?: SubmitAuthOptions<T>;
+    get?: SubmitAuthOptions<T>;
+    create?: SubmitAuthOptions<T>;
+    update?: SubmitAuthOptions<T>;
+    delete?: SubmitAuthOptions<T>;
+    deleteMany?: SubmitAuthOptions<T>;
+}

package/dist/types/configs/types/table-data.types.d.ts

@@ -0,0 +1,130 @@
+import { ZodType } from 'zod';
+import { DataView, Schema, FormDesign, SubmitAuthOptionMap, SupportedLanguage, XOR } from '../../index';
+export interface BaseConfig<Item> {
+    source: XOR<{
+        DB_NAME: string;
+        connect?: Array<{
+            key: string;
+            DB_NAME: string;
+            connectKey: string;
+        }>;
+    }, {
+        fetchApi: {
+            get: string;
+            getAll: string;
+            autoRefresh?: {
+                time: number;
+            };
+            connect?: Array<{
+                key: string;
+                url: string;
+                connectKey: string;
+                valueKey?: string;
+            }>;
+        };
+    }>;
+    data?: Item[];
+    dataTabelDisplay?: DataView;
+    dataTabelCustomDisplay?: Item[];
+    headersTabelDisplay?: string[];
+    justTabel?: boolean;
+    lang?: SupportedLanguage;
+    schema: FormSchema;
+}
+export interface FormSchema {
+    global?: Schema;
+    display?: Schema;
+    create?: Schema;
+    update?: Schema;
+}
+export interface TabelTextLabels {
+    btn: {
+        add?: string;
+        display?: string;
+        delete?: string;
+        deleteMany?: string;
+        next?: string;
+        prev?: string;
+        create?: string;
+        update?: string;
+    };
+    action?: string;
+    message?: {
+        notFound?: string;
+    };
+    warning?: {
+        delete?: string;
+        deleteMany?: string;
+    };
+}
+export interface DataKeyConfig {
+    idKey?: string;
+    idsKey?: string;
+    nameKey?: string;
+}
+export interface TabelFeatureToggles {
+    btnInfoActive?: boolean;
+    searchQueryActive?: boolean;
+    sortable?: boolean;
+    createActive?: boolean;
+    updateActive?: boolean;
+    deleteActive?: boolean;
+    deleteManyActive?: boolean;
+    displayActive?: boolean;
+    JustTabel?: boolean;
+}
+export interface TabelFeatureToggles {
+    btnInfoActive?: boolean;
+    searchQueryActive?: boolean;
+    sortable?: boolean;
+    createActive?: boolean;
+    updateActive?: boolean;
+    deleteActive?: boolean;
+    deleteManyActive?: boolean;
+    displayActive?: boolean;
+}
+export interface TabelManualControl {
+    create?: boolean;
+    update?: boolean;
+    delete?: boolean;
+    deleteMany?: boolean;
+    display?: boolean;
+}
+export interface TabelPagination {
+    itemsPerPage?: number;
+    maxVisiblePages?: number;
+    maxDataTabelRowDisplay?: number;
+    indicator?: {
+        displayingText?: string;
+        dataText?: string;
+    };
+}
+export interface TabelValidationSchema<T> {
+    create?: ZodType<T>;
+    update?: ZodType<T>;
+    delete?: ZodType<T>;
+    deleteMany?: ZodType<T>;
+}
+export interface TabelEndpoints {
+    create?: string;
+    update?: string;
+    delete?: string;
+    deleteMany?: string;
+}
+export interface TabelSharedConfig<Item> {
+    keys?: DataKeyConfig;
+    formDesign?: FormDesign;
+    submitOption?: SubmitAuthOptionMap<Item>;
+    feature?: TabelFeatureToggles;
+    pagination?: TabelPagination;
+    validation?: TabelValidationSchema<Item>;
+    manual?: TabelManualControl;
+    endPoints?: TabelEndpoints;
+}
+export interface TabelDataProperty<Item> extends TabelSharedConfig<Item> {
+    base: Omit<BaseConfig<Item>, 'data'>;
+}
+export interface TabelDataConfig<Item> extends TabelSharedConfig<Item> {
+    base: BaseConfig<Item>;
+    data?: any;
+}

package/dist/types/fetch/index.d.ts

@@ -0,0 +1 @@
+export * from './submitData';

package/dist/types/fetch/submitData.d.ts

@@ -0,0 +1,2 @@
+import { SubmitOptions, Schema } from '../index';
+export declare const submitData: <T extends Record<string, any>>(options: SubmitOptions<T>, schema?: Schema, idKey?: string, idsKey?: string) => Promise<any>;

package/dist/types/helpers/clientInfo.d.ts

@@ -0,0 +1,5 @@
+export interface ClientLocaleInfo {
+    locale: string;
+    timeZone: string;
+}
+export declare function getClientLocaleAndTimeZone(fallbackLocale?: string, fallbackTimeZone?: string): ClientLocaleInfo;

package/dist/types/helpers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './clientInfo';
+export * from './locale';
+export * from './message';

package/dist/types/helpers/locale.d.ts

@@ -0,0 +1,3 @@
+export declare const formatDate: (val: string) => string;
+export declare const formatTime: (val: string) => string;
+export declare const formatDateTime: (val: string) => string;

package/dist/types/helpers/message.d.ts

@@ -0,0 +1,2 @@
+import { inputMessages, SupportedLanguage } from '..';
+export declare function getMessage(key: keyof typeof inputMessages, vars?: Record<string, string | number>, lang?: SupportedLanguage): string;

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+export * from './components';
+export * from './configs';
+export * from './validate';
+export * from './lib';
+export * from './untils';
+export * from './helpers';
+export * from './fetch';
+export * from './schemas';

package/dist/types/init.d.ts

@@ -0,0 +1,2 @@
+import { JsgdVuePackConfig } from './configs';
+export default function initialize(configs?: JsgdVuePackConfig): void;

package/dist/types/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './indexedDB';
+export * from './secureFetch';

package/dist/types/lib/indexedDB.d.ts

@@ -0,0 +1,29 @@
+type IndexedDBConfig<S extends string, A extends string> = {
+    dbName?: string;
+    dbVersion?: number;
+    storeSingle?: S[];
+    storeArray?: A[];
+};
+export declare function configureIndexedDB<S extends string, A extends string>(config: IndexedDBConfig<S, A>): void;
+export declare function isStoreArray(store: string): store is StoreArray;
+export type StoreSingle = string;
+export type StoreArray = string;
+export type StoreName = StoreSingle | StoreArray;
+export declare function saveToIndexedDB(data: Record<string, any>): Promise<void>;
+export declare function getSingleFromIndexedDB<T = any>(storeName: StoreSingle, key?: string): Promise<T | undefined>;
+export declare function getFromIndexedDB<T = any>(storeName: StoreArray): Promise<T[]>;
+export declare function updateItemInStore<T = any>(storeName: StoreArray, item: T): Promise<void>;
+export declare function getItemById<T = any>(storeName: StoreArray, id: string | number): Promise<T | undefined>;
+export declare function clearStore(storeName: StoreName): Promise<void>;
+/**
+ * Menghapus satu item dari store 'array' berdasarkan ID-nya.
+ * @param storeName Nama store (harus tipe array).
+ * @param id ID dari item yang akan dihapus.
+ */
+export declare function deleteItemFromStore(storeName: StoreArray, id: string | number): Promise<void>;
+/**
+ * Menghapus beberapa item dari beberapa store sekaligus.
+ * @param data Objek di mana key adalah nama store dan value adalah ID atau array ID yang akan dihapus.
+ */
+export declare function removeFromIndexedDB(data: Record<string, number[] | number>): Promise<void>;
+export {};

package/dist/types/lib/secureFetch.d.ts

@@ -0,0 +1,8 @@
+type AuthType = 'cookie' | 'bearer' | 'none' | 'custom';
+interface SecureFetchOptions extends RequestInit {
+    authType?: AuthType;
+    token?: string;
+    customHeaders?: Record<string, string>;
+}
+export declare function secureFetch(input: RequestInfo, options?: SecureFetchOptions): Promise<any>;
+export {};

package/dist/types/plugin/vue.plugin.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from 'vue';
+declare const JsgdComponents: Plugin;
+export default JsgdComponents;

package/dist/types/schemas/TestSchema.d.ts

@@ -0,0 +1,2 @@
+import { Schema } from '..';
+export declare const TestSchema: Schema;

package/dist/types/schemas/index.d.ts

@@ -0,0 +1 @@
+export * from './TestSchema';

package/dist/types/untils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './math';
+export * from './misc';
+export * from './objectPath';
+export * from './regex';

package/dist/types/untils/math.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Menghitung Faktor Persekutuan Terbesar (FPB) atau Greatest Common Divisor (GCD).
+ * Fungsi ini penting untuk menyederhanakan pecahan atau rasio.
+ * @param a - Angka pertama.
+ * @param b - Angka kedua.
+ * @returns FPB dari a dan b.
+ */
+export declare function gcd(a: number, b: number): number;
+/**
+ * Menyederhanakan lebar dan tinggi ke rasio terkecil dalam bentuk angka.
+ * Contoh: simplifyRatio(1920, 1080) akan menghasilkan { w: 16, h: 9 }
+ * @param w - Lebar (width).
+ * @param h - Tinggi (height).
+ * @returns Objek yang berisi lebar dan tinggi yang telah disederhanakan.
+ */
+export declare function simplifyRatio(w: number, h: number): {
+    w: number;
+    h: number;
+};
+/**
+ * Mendapatkan string rasio yang paling sesuai.
+ * Fungsi ini akan mencoba mencocokkan dengan rasio umum (16:9, 4:3, dll.).
+ * Jika tidak ada yang cocok, fungsi akan mengembalikan rasio dinamis yang paling sederhana.
+ * @param w - Lebar (width).
+ * @param h - Tinggi (height).
+ * @returns String rasio, contoh: "16:9" atau "20:3".
+ */
+export declare function getCommonRatio(w: number, h: number): string;

package/dist/types/untils/misc.d.ts

@@ -0,0 +1,3 @@
+export declare function setUID(): string;
+export declare function isSameMessage(a: string | string[] | undefined, b: string | string[]): boolean;
+export declare function hasAnyError(val: unknown): boolean;

package/dist/types/untils/objectPath.d.ts

@@ -0,0 +1,5 @@
+export declare function getNested(obj: any, path: string): any;
+export declare function setNested(obj: any, path: string, value: any): void;
+export declare function unsetNested(obj: any, path: string): void;
+export declare function deleteNestedAndCleanup(obj: any, path: string): void;
+export declare function normalizeKey(key: string, keyRemove?: string): string;

package/dist/types/untils/regex.d.ts

@@ -0,0 +1,8 @@
+import { DateOnly, TimeOnly, DateTimeString } from '..';
+export declare const emailRegex: RegExp;
+export declare const DATE_REGEX: RegExp;
+export declare const TIME_REGEX: RegExp;
+export declare const DATETIME_REGEX: RegExp;
+export declare function toDateOnly(value: string): DateOnly;
+export declare function toTimeOnly(value: string): TimeOnly;
+export declare function toDateTimeString(value: string): DateTimeString;