@jsg-developer/vue-pack 0.0.9-beta-7 → 0.0.9-beta-8

package/README.md

@@ -2,98 +2,134 @@
 
 [![NPM Version](https://img.shields.io/npm/v/@jsg-developer/vue-pack?style=flat-square)](https://www.npmjs.com/package/@jsg-developer/vue-pack)
 [![Build Status](https://img.shields.io/github/actions/workflow/status/JSGDevelompent/@jsg-developer/vue-pack/main.yml?branch=main&style=flat-square)](https://github.com/JSGDevelompent/@jsg-developer/vue-pack/actions)
+[![Status](https://img.shields.io/badge/status-Beta-orange?style=flat-square)]()
 [![License](https://img.shields.io/badge/license-MIT-green?style=flat-square)](./LICENSE)
 
-**@jsg-developer/vue-pack** is a comprehensive Vue 3 component library, built with TypeScript and Vite.  
-It is designed to accelerate development by providing a rich set of ready-to-use UI components, ranging from complex data tables and modal forms to various types of input fields.
+> 🚧 **Status: Beta** > This library is currently in active development and testing. The GitHub repository is temporarily private to ensure code stability and will be made fully public upon the first stable release. Feedback and issue reports via npm are welcome!
+
+**@jsg-developer/vue-pack** is a comprehensive, highly modular Vue 3 component library built with TypeScript and Vite.  
+It is designed to drastically accelerate enterprise development by providing a rich set of data-driven UI components, schema-based form generators, advanced data tables with CRUD capabilities, and standalone utility functions.
 
 ---
 
 ## ✨ Features
 
-- **Complete Component Collection**: Includes `TabelData`, `FormModal`, `FormFieldRenderer`, and more than 30+ other UI and input components.
-- **TypeScript First**: Fully built with TypeScript for _type-safety_ and a great development experience with _auto-complete_ support.
-- **Highly Configurable**: Easily customize the behavior of the library through a `jsgd.config.ts` file.
-- **Internationalization (i18n)**: Built-in support for multiple languages including English, Indonesian, Spanish, French, German, and more.
-- **Modern Automation**: Uses a custom Vite plugin to auto-generate module entries, making maintenance easier.
-- **Styling with UnoCSS**: Integrated with UnoCSS for fast and efficient utility-first styling.
+- **Schema-Driven UI**: Generate complex forms and data tables automatically by simply defining a JSON/TypeScript schema (`FormModal`, `TabelData`).
+- **Complete Input Collection**: Over 30+ input types supported, including Map Pickers (Leaflet/Geoapify), Rich Text (Quill), Color Pickers, and Array/Object nested inputs.
+- **Tree-Shakable Architecture**: Import only what you need. Vue components, TypeScript types, and utility functions (`indexedDB`, `secureFetch`) are fully decoupled.
+- **Built-in IndexedDB Engine**: Powerful, dynamic client-side storage management out-of-the-box.
+- **SEO & Validation Engine**: Built-in Zod validation and dynamic SEO score calculation.
+- **Internationalization (i18n)**: Deeply customizable text, supporting multi-language overrides out of the box.
+- **Styling with UnoCSS**: Fast, utility-first styling with zero-runtime overhead.
 
 ---
 
 ## 🚀 Installation
 
-Install this package using npm:
+Install the package alongside its peer dependencies:
 
 ```bash
 npm install @jsg-developer/vue-pack
-
 ```
 
----
-
-## Usage
+> **Note:** Ensure you have `vue`, `zod`, and `leaflet` installed in your project as they are required peer dependencies.
 
-Here’s how to integrate and use `@jsg-developer/vue-pack` in your Vite + Vue 3 project.
-
-### 1. Configure the Plugin
-
-Update your `vite.config.ts` file to include the Vite plugin from this library.
+---
 
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import JsgdVuePack from '@jsg-developer/vue-pack/vite' // <-- Import Vite plugin
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    JsgdVuePack(), // <-- Use the plugin
-  ],
-})
-```
+## 💻 Usage
 
-### 2. Register Global Components
+### 1. Global Registration (Vue Plugin)
 
-In your main entry file (`main.ts`), use the Vue plugin to register all components globally.
+In your main entry file (`main.ts`), import the CSS and register the Vue plugin. You can also pass global configurations here.
 
 ```typescript
 // main.ts
 import { createApp } from 'vue'
 import App from './App.vue'
+
+// 1. Import Library CSS
 import '@jsg-developer/vue-pack/style.css'
-import JsgdComponents from '@jsg-developer/vue-pack/vue' // <-- Import Vue plugin
+
+// 2. Import the Vue Plugin
+import JsgdVuePack from '@jsg-developer/vue-pack/vue'
 
 const app = createApp(App)
 
-app.use(JsgdComponents) // <-- Register all components
+// 3. Register with Optional Global Configuration
+app.use(JsgdVuePack, {
+  indexedDB: {
+    dbName: 'MyAwesomeAppDB',
+    dbVersion: 1,
+    storeSingle: ['userProfile', 'appSettings'],
+    storeArray: ['tools', 'subTools', 'promo'],
+  },
+  i18n: {
+    // Override default component texts here
+  },
+  modalConfig: {
+    displayNullValue: false,
+    labels: {
+      btn: {
+        submit: { create: 'Save New Item', update: 'Update Item' },
+        cancel: 'Discard',
+      },
+    },
+  },
+})
+
 app.mount('#app')
 ```
 
-## 📦 Available Components
+### 2. Standalone Utilities (Tree-Shaking)
 
-This library covers a wide range of component categories, including:
+You don't need to load the UI components if you only want to use the library's powerful utility functions. They are exported via sub-paths:
 
-- **Data Display**: `TabelData`, `FieldDetailRenderer`, `BaseImage`, `ModalDetailData`
-- **Forms & Modals**: `FormModal`, `FormFieldRenderer`
-- **Feedback**: `AlertApp`, `Loader`, `WarningForm`
-- **Inputs**: `TextInput`, `NumberInput`, `ImageInput`, `ColorPicker`, `TextAreaQuill`, `ComboboxComponent`, `TagInput`, and many more.
+#### IndexedDB Management
 
----
+```typescript
+import { saveToIndexedDB, getFromIndexedDB } from '@jsg-developer/vue-pack/indexedDB'
 
-## 📜 License
+// Save data automatically
+await saveToIndexedDB({ tools: myToolsArray })
 
-This project is licensed under the **MIT License**.
+// Retrieve data
+const tools = await getFromIndexedDB('tools')
+```
 
-You are free to use, modify, and distribute this software in your projects, both personal and commercial.
+#### Secure Fetch API
+
+```typescript
+import { secureFetch } from '@jsg-developer/vue-pack/secureFetch'
 
-See the [LICENSE](https://www.google.com/search?q=./LICENSE) file for full details.
+const response = await secureFetch('[https://api.example.com/data](https://api.example.com/data)', {
+  authType: 'bearer',
+  token: 'your-jwt-token',
+})
+const data = await response.json()
+```
 
 ---
 
-## ⚖️ Third-Party Licenses
+## 📦 Component Categories
+
+This library covers a wide range of components, easily imported via `@jsg-developer/vue-pack/components`:
+
+- **Data Presentation**: `TabelData`, `FieldDetailRenderer`, `BaseImage`, `ModalDetailData`
+- **Forms & Generators**: `FormModal`, `FormFieldRenderer`
+- **Feedback & Loaders**: `AlertApp`, `LoaderSuccessError`, `WarningForm`
+- **Inputs**: `TextInput`, `CurrencyInput`, `MapPicker`, `ImageArrayInput`, `ColorPicker`, `TextAreaQuill`, `TagInput`, and many more.
+
+---
+
+## ⚖️ License
+
+This project is licensed under the **MIT License**.
+
+You are free to use, modify, and distribute this software in your projects, both personal and commercial. See the `LICENSE` file for full details.
+
+### Third-Party Licenses
 
-This project utilizes third-party open-source software. The licenses for these dependencies are available in the [THIRD_PARTY_LICENSES.md](https://www.google.com/search?q=./THIRD_PARTY_LICENSES.md) file.
+This project utilizes third-party open-source software (such as Leaflet, Quill, DOMPurify). The licenses for these dependencies are generated automatically and available in the `THIRD_PARTY_LICENSES.md` file within the distributed package.
 
 ---
 
@@ -101,4 +137,4 @@ This project utilizes third-party open-source software. The licenses for these d
 
 Developed by **JSGDevelompent**.
 
-- **GitHub**: [JSGDevelompent](https://github.com/JSGDevelompent)
+- **GitHub**: [JSGDevelompent](https://github.com/JSGDevelompent) _(Repository will be public upon stable v1.0 release)_

package/THIRD_PARTY_LICENSES.json

@@ -47,7 +47,7 @@
     "path": "/home/jsgdev/Code/jsgd-vue-pack/node_modules/@jridgewell/sourcemap-codec",
     "licenseFile": "/home/jsgdev/Code/jsgd-vue-pack/node_modules/@jridgewell/sourcemap-codec/LICENSE"
   },
-  "@jsg-developer/vue-pack@0.0.9-beta-6": {
+  "@jsg-developer/vue-pack@0.0.9-beta-8": {
     "licenses": "MIT",
     "path": ".",
     "licenseFile": "LICENSE"