@jsg-developer/vue-pack

🚧 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

• 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 the package alongside its peer dependencies:

npm install @jsg-developer/vue-pack

Note: Ensure you have vue, zod, and leaflet installed in your project as they are required peer dependencies.

💻 Usage

1. Global Registration (Vue Plugin)

In your main entry file (main.ts), import the CSS and register the Vue plugin. You can also pass global configurations here.

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

// 1. Import Library CSS
import '@jsg-developer/vue-pack/style.css'

// 2. Import the Vue Plugin
import JsgdVuePack from '@jsg-developer/vue-pack/vue'

const app = createApp(App)

// 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')

2. Standalone Utilities (Tree-Shaking)

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:

IndexedDB Management

import { saveToIndexedDB, getFromIndexedDB } from '@jsg-developer/vue-pack/indexedDB'

// Save data automatically
await saveToIndexedDB({ tools: myToolsArray })

// Retrieve data
const tools = await getFromIndexedDB('tools')

Secure Fetch API

import { secureFetch } from '@jsg-developer/vue-pack/secureFetch'

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()

📦 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 (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.

🧑‍💻 Author

Developed by JSGDevelompent.

• GitHub: JSGDevelompent (Repository will be public upon stable v1.0 release)