jsgd-vue-pack

jsgd-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.

✨ 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.

🚀 Installation

Install this package using npm:

npm install jsgd-vue-pack

Usage

Here’s how to integrate and use jsgd-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.

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import JsgdVuePack from 'jsgd-vue-pack/vite' // <-- Import Vite plugin

export default defineConfig({
  plugins: [
    vue(),
    JsgdVuePack(), // <-- Use the plugin
  ],
})

2. Register Global Components

In your main entry file (main.ts), use the Vue plugin to register all components globally.

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import JsgdComponents from 'jsgd-vue-pack/vue' // <-- Import Vue plugin

const app = createApp(App)

app.use(JsgdComponents) // <-- Register all components
app.mount('#app')

3. Customization (Optional)

Create a jsgd.config.ts file in your project root to customize behavior, e.g., adding new languages.

// jsgd.config.ts
import { defineConfig } from 'jsgd-vue-pack/config'

export default defineConfig({
  i18n: {
    // Add or override languages
    languages: [
      {
        lang: 'id',
        config: {
          // ...Indonesian language config here
        },
      },
    ],
  },
})

4. Using Components

Now you can directly use components inside your .vue files.

<template>
  <div>
    <TabelData :base="tableBaseConfig" :feature="tableFeatures" :endpoints="apiEndpoints" />
  </div>
</template>

<script setup lang="ts">
// Import components manually if you don’t want global registration
// import { TabelData } from 'jsgd-vue-pack';

// Config for TabelData
const tableBaseConfig = {
  // ...
}
const tableFeatures = {
  // ...
}
const apiEndpoints = {
  // ...
}
</script>

📦 Available Components

This library covers a wide range of component categories, including:

• 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.

📜 License

This project is released under a custom license. Please see the LICENSE file for full details.

• Compiled Software (Build/Dist): Free to use and modify for personal or internal purposes.
• Original Source Code: All rights reserved. Viewing, modifying, or redistributing the original source code without written permission is strictly prohibited.

⚖️ Third-Party Licenses

This project utilizes third-party open-source software. The licenses for these dependencies are available in the THIRD_PARTY_LICENSES.md file.

🧑‍💻 Author

Developed by JSGDevelompent.

• GitHub: JSGDevelompent