vlite3 0.4.10 → 0.5.3

package/README.md

@@ -6,10 +6,12 @@ A lightweight Vue 3 UI component library built with Tailwind CSS, created for pe
 
 ```bash
 npm install vlite3
+
 ```
 
 ```bash
 yarn add vlite3
+
 ```
 
 ## 2. Tailwind CSS Setup (Tailwind v4)
@@ -53,11 +55,11 @@ import { Button, Input } from 'vlite3'
 
 ## Global Configuration (Registry System)
 
-vlite3 features a plugin-based architecture that allows you to register global services. This is particularly useful for dependency injection, such as defining how file uploads should be handled across all `Form` components in your app.
+vlite3 features a plugin-based architecture that allows you to register global services and set global component configurations. This ensures consistency and prevents repetition across your application.
 
 ### Setting up the Plugin
 
-In your `main.ts` or `main.js`, import `createVLite` and `vScrollReveal` and register your services:
+In your `main.ts` or `main.js`, import `createVLite` and `vScrollReveal` and register your services and component configurations:
 
 ```typescript
 import { createApp } from 'vue'
@@ -75,6 +77,7 @@ app.use(GoogleSignInPlugin, {
 
 // Initialize VLite with custom configuration
 const vlite = createVLite({
+  // Global Service Registry
   services: {
     /**
      * Global File Upload Handler
@@ -111,6 +114,16 @@ const vlite = createVLite({
       return data.url // MUST return the file URL string
     },
   },
+
+  // Global UI Components Configuration
+  components: {
+    form: {
+      variant: 'outline', // Applies 'outline' globally to all Form inputs ('solid' | 'outline' | 'floating' | etc.)
+      size: 'md', // Global size for form inputs ('sm' | 'md' | 'lg')
+      rounded: 'md', // Global border radius for forms
+      showRequiredAsterisk: true, // Globally toggle the visibility of the required asterisk
+    },
+  },
 })
 
 app.use(vlite)
@@ -119,21 +132,30 @@ app.mount('#app')
 
 ### How it works
 
+#### Global Services (e.g., Uploads)
+
 Once registered, you don't need to pass upload handlers to individual components.
 
 1. **Automatic Injection**: The `Form` component detects input types like `file`, `avatarUpload`, or `fileUploader`.
 2. **Parallel Processing**: When the form is submitted, it automatically uploads all files in **parallel** using your registered `upload` service.
 3. **URL Replacement**: The File objects in your form data are replaced with the returned URLs before the final `onSubmit` event is triggered.
 
-## 4. Usage
+#### Global Component Configuration (e.g., Forms)
 
-Import components directly in your Vue files:
+By setting `components.form` in the global configuration, you establish app-wide defaults.
+
+1. **Consistency**: Every `<Form />` rendered in your application will automatically inherit the global `variant`, `size`, `rounded`, and `showRequiredAsterisk` configurations.
+2. **Local Overrides**: If you need a specific form to behave differently, simply pass the prop locally on the component (e.g., `<Form variant="floating" ... />`). Local props will always override the global configuration fallback.
+
+## 4. Advanced Usage
+
+Import components directly in your Vue files and leverage the global configuration:
 
 ```vue
 <script setup>
 import { Button, Input, Form } from 'vlite3'
 
-// The form will automatically use the global upload service defined in main.ts
+// The form will automatically use the global upload service AND the global style configurations
 const schema = [
   {
     name: 'avatar',
@@ -158,6 +180,8 @@ const handleSubmit = (payload) => {
 <template>
   <div class="">
     <Form :schema="schema" @onSubmit="handleSubmit" />
+
+    <Form :schema="schema" variant="solid" size="lg" @onSubmit="handleSubmit" />
   </div>
 </template>
 ```
@@ -198,23 +222,81 @@ Override these variables in `:root` or within a `.dark` class (when using class-
 
 For more complex components, vlite3 provides extended variants for main semantic colors (`primary`, `danger`, `warning`, `info`, `success`). These are useful for building nuanced UIs with subtle backgrounds, hover states, and accessible text.
 
-| Base Color  | Variant Variables                                                                                       | Usage Description                                                                                                                                                                                           |
-| :---------- | :------------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Primary** | `--color-primary-light`<br>`--color-primary-dark`<br>`--color-primary-fg`<br>`--color-primary-fg-light` | **Light**: Subtle background (e.g., 10% opacity).<br>**Dark**: Hover state for the main color.<br>**Fg**: Text color on top of the _main_ color.<br>**Fg-Light**: Text color on top of the _light_ variant. |
-| **Danger**  | `--color-danger-light`<br>`--color-danger-dark`<br>`--color-danger-fg`<br>`--color-danger-fg-light`     | **Light**: Error backgrounds (alerts).<br>**Dark**: Hover state for destructive buttons.<br>**Fg**: Text on destructive buttons.<br>**Fg-Light**: Text on error alerts.                                     |
-| **Warning** | `--color-warning-light`<br>`--color-warning-dark`<br>`--color-warning-fg`<br>`--color-warning-fg-light` | **Light**: Warning backgrounds.<br>**Dark**: Active/Determined warning states.<br>**Fg**: Text on warning badges.<br>**Fg-Light**: Text on warning backgrounds.                                             |
-| **Success** | `--color-success-light`<br>`--color-success-dark`<br>`--color-success-fg`<br>`--color-success-fg-light` | **Light**: Success backgrounds (toasts).<br>**Dark**: Hover/Active success actions.<br>**Fg**: Text on success buttons.<br>**Fg-Light**: Text on success backgrounds.                                       |
-| **Info**    | `--color-info-light`<br>`--color-info-dark`<br>`--color-info-fg`<br>`--color-info-fg-light`             | **Light**: Info backgrounds.<br>**Dark**: Hover/Active info actions.<br>**Fg**: Text on info buttons.<br>**Fg-Light**: Text on info backgrounds.                                                            |
+| Base Color  | Variant Variables           | Usage Description |
+| ----------- | --------------------------- | ----------------- |
+| **Primary** | `--color-primary-light`<br> |
+
+<br>`--color-primary-dark`<br>
+
+<br>`--color-primary-fg`<br>
+
+<br>`--color-primary-fg-light` | **Light**: Subtle background (e.g., 10% opacity).<br>
+
+<br>**Dark**: Hover state for the main color.<br>
+
+<br>**Fg**: Text color on top of the _main_ color.<br>
+
+<br>**Fg-Light**: Text color on top of the _light_ variant. |
+| **Danger** | `--color-danger-light`<br>
+
+<br>`--color-danger-dark`<br>
+
+<br>`--color-danger-fg`<br>
+
+<br>`--color-danger-fg-light` | **Light**: Error backgrounds (alerts).<br>
+
+<br>**Dark**: Hover state for destructive buttons.<br>
+
+<br>**Fg**: Text on destructive buttons.<br>
+
+<br>**Fg-Light**: Text on error alerts. |
+| **Warning** | `--color-warning-light`<br>
+
+<br>`--color-warning-dark`<br>
+
+<br>`--color-warning-fg`<br>
+
+<br>`--color-warning-fg-light` | **Light**: Warning backgrounds.<br>
+
+<br>**Dark**: Active/Determined warning states.<br>
+
+<br>**Fg**: Text on warning badges.<br>
+
+<br>**Fg-Light**: Text on warning backgrounds. |
+| **Success** | `--color-success-light`<br>
+
+<br>`--color-success-dark`<br>
+
+<br>`--color-success-fg`<br>
+
+<br>`--color-success-fg-light` | **Light**: Success backgrounds (toasts).<br>
+
+<br>**Dark**: Hover/Active success actions.<br>
+
+<br>**Fg**: Text on success buttons.<br>
+
+<br>**Fg-Light**: Text on success backgrounds. |
+| **Info** | `--color-info-light`<br>
+
+<br>`--color-info-dark`<br>
+
+<br>`--color-info-fg`<br>
+
+<br>`--color-info-fg-light` | **Light**: Info backgrounds.<br>
+
+<br>**Dark**: Hover/Active info actions.<br>
+
+<br>**Fg**: Text on info buttons.<br>
+
+<br>**Fg-Light**: Text on info backgrounds. |
 
 **Example Usage:**
 
 ```html
-<!-- A success badge with subtle background and matching text -->
 <div class="bg-success-light text-success-fg-light border border-success/20">
   Operation Completed
 </div>
 
-<!-- A danger button with hover effect -->
 <button class="bg-danger text-danger-fg hover:bg-danger-dark">Delete</button>
 ```
 
@@ -223,7 +305,7 @@ For more complex components, vlite3 provides extended variants for main semantic
 vlite3 also provides additional utility colors for specific feedback states:
 
 | Variable          | Class Name                   | Description                             |
-| :---------------- | :--------------------------- | :-------------------------------------- |
+| ----------------- | ---------------------------- | --------------------------------------- |
 | `--color-success` | `text-success`, `bg-success` | For success messages/badges.            |
 | `--color-warning` | `text-warning`, `bg-warning` | For warning messages/badges.            |
 | `--color-info`    | `text-info`, `bg-info`       | For informational messages/badges.      |
@@ -306,75 +388,95 @@ Follow these rules strictly to ensure visual consistency and predictable styling
 - Use `rounded` instead of `rounded-rounded`.
 - Use `bg-muted` instead of `bg-secondary/20`.
 - Use `gap-x-*` instead of applying `ml-*` or `mr-*` directly on sibling items.
-- Use `gap-y-*` instead of applying `mt
+- Use `gap-y-*` instead of applying `mt-*` or `mb-*` directly on sibling items.
 
 ---
 
 ## ✅ Components
 
-- **Button**
-- **ButtonGroup**
-- **Icon**
-- **Label**
-- **Badge**
-- **Chip**
-- **Logo**
-- **Navbar**
-- **SidebarMenu**
-- **SidePanel**
-- **Masonry Grid**
-- **ThemeToggle**
+- [x] **Button**
+- [x] **ButtonGroup**
+- [x] **Icon**
+- [x] **Label**
+- [x] **Badge**
+- [x] **Chip**
+- [x] **Logo**
+- [x] **Navbar**
+- [x] **SidebarMenu**
+- [x] **SidePanel**
+- [x] **Breadcrumb**
+- [x] **List**
+- [x] **Masonry Grid**
+- [x] **Stats**
+- [x] **ThemeToggle**
+- [x] **Screen**
 
 ### Inputs & Forms
 
-- **Input**
-- **Textarea**
-- **CheckBox**
-- **Switch**
-- **ChoiceBox**
-- **Slider**
-- **OTPInput**
-- **DatePicker**
-- **ColorPicker**
-- **FilePicker**
-- **AvatarUploader**
-- **IconPicker**
-- **MultiSelect**
-- **Form**
-- **CustomFields**
-- **NumberInput**
-- **Google Login**
+- [x] **Input**
+- [x] **Textarea**
+- [x] **CheckBox**
+- [x] **Switch**
+- [x] **ChoiceBox**
+- [x] **Slider**
+- [x] **OTPInput**
+- [x] **NumberInput**
+- [x] **DatePicker**
+- [x] **DateRangePicker**
+- [x] **ColorPicker**
+- [x] **FilePicker**
+- [x] **AvatarUploader**
+- [x] **IconPicker**
+- [x] **MultiSelect**
+- [x] **Forms**
+- [x] **CustomFields**
+- [x] **GoogleLogin**
+- [x] **PermissionEditor**
 
 ### Data Display
 
-- **Avatar**
-- **Accordion**
-- **Carousel**
-- **DataTable**
-- **Pagination**
-- **Timeline**
-- **Heatmap**
-- **PricingPlan**
-- **FileTree**
-- **Workbook**
-- **Tabes**
+- [x] **Avatar**
+- [x] **Accordion**
+- [x] **Carousel**
+- [x] **DataTable**
+- [x] **DataList**
+- [x] **Pagination**
+- [x] **Timeline**
+- [x] **Heatmap**
+- [x] **PricingPlan**
+- [x] **FileTree**
+- [x] **Workbook**
+- [x] **Kanban**
+- [x] **Tabes**
+- [x] **Masonry**
+- [x] **Stats**
 
 ### Feedback & Overlays
 
-- **Alert**
-- **Modal**
-- **ConfirmationModal**
-- **ToastNotification**
-- **Tooltip**
-- **Dropdown**
-- **ProgressBar**
-- **Spinner**
+- [x] **Alert**
+- [x] **Modal**
+- [x] **ConfirmationModal**
+- [x] **ToastNotification**
+- [x] **Tooltip**
+- [x] **Dropdown**
+- [x] **ProgressBar**
+- [x] **Spinner**
+- [x] **CommandPalette**
+- [x] **SidePanel**
+
+### Utilities & Tools
+
+- [x] **Barcode**
+- [x] **QRCode**
+- [x] **ImportData**
+- [x] **ExportData**
 
 ## Complete reference for AI agents and developers:
 
-- [1-setup.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/1-setup.md)
-- [2-theming.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/2-theming.md)
-- [3-all-components.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/3-all-components.md)
-- [4-forms.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/4-forms.md)
-- [5-utility.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/5-utility.md)
-- [6-advance-components.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/6-advance-components.md)
+- [0-setup.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/0-vlite3-setup.md)
+- [1-theming.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/1-theming.md)
+- [2-components.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/2-all-components.md)
+- [3-forms.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/components/Forms.md)
+- [3-utility.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/3-utility.md)
+- [4-i18n.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/4-i18n.md)
+- [5-search-util.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/5-search-util.md)

package/_virtual/Barcode.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/CODE128.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/CODE128A.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/CODE128B.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/CODE128C.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/CODE128_AUTO.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/CODE93.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/CODE93FullASCII.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/EAN.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/EAN13.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/EAN2.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/EAN5.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/EAN8.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/ErrorHandler.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/FileSaver.min.js

@@ -0,0 +1,5 @@
+import { __require as r } from "../node_modules/file-saver/dist/FileSaver.min.js";
+var i = r();
+export {
+  i as F
+};

package/_virtual/FileSaver.min2.js

@@ -0,0 +1,4 @@
+var e = { exports: {} };
+export {
+  e as __module
+};

package/_virtual/ITF.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/ITF14.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/JsBarcode.js

@@ -0,0 +1,7 @@
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
+import { __require as o } from "../node_modules/jsbarcode/bin/JsBarcode.js";
+var e = o();
+const s = /* @__PURE__ */ r(e);
+export {
+  s as default
+};

package/_virtual/MSI.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/MSI10.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/MSI1010.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/MSI11.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/MSI1110.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/UPC.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/UPCE.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/_commonjsHelpers.js

@@ -0,0 +1,8 @@
+var o = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function l(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+export {
+  o as commonjsGlobal,
+  l as getDefaultExportFromCjs
+};

package/_virtual/alignment-pattern.js

@@ -0,0 +1,4 @@
+var t = {};
+export {
+  t as __exports
+};

package/_virtual/auto.js

@@ -0,0 +1,4 @@
+var a = {};
+export {
+  a as __exports
+};

package/_virtual/browser.js

@@ -0,0 +1,7 @@
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
+import { __require as o } from "../node_modules/qrcode/lib/browser.js";
+var e = o();
+const a = /* @__PURE__ */ r(e);
+export {
+  a as default
+};

package/_virtual/browser2.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/canvas.js

@@ -0,0 +1,4 @@
+var a = {};
+export {
+  a as __exports
+};

package/_virtual/canvas2.js

@@ -0,0 +1,4 @@
+var a = {};
+export {
+  a as __exports
+};

package/_virtual/checksums.js

@@ -0,0 +1,4 @@
+var s = {};
+export {
+  s as __exports
+};

package/_virtual/constants.js

@@ -0,0 +1,4 @@
+var s = {};
+export {
+  s as __exports
+};

package/_virtual/constants2.js

@@ -0,0 +1,4 @@
+var s = {};
+export {
+  s as __exports
+};

package/_virtual/constants3.js

@@ -0,0 +1,4 @@
+var s = {};
+export {
+  s as __exports
+};

package/_virtual/constants4.js

@@ -0,0 +1,4 @@
+var s = {};
+export {
+  s as __exports
+};

package/_virtual/defaults.js

@@ -0,0 +1,4 @@
+var a = {};
+export {
+  a as __exports
+};

package/_virtual/dijkstra.js

@@ -0,0 +1,4 @@
+var r = { exports: {} };
+export {
+  r as __module
+};

package/_virtual/encoder.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/_virtual/error-correction-code.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/error-correction-level.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/exceptions.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/_virtual/finder-pattern.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/_virtual/fixOptions.js

@@ -0,0 +1,4 @@
+var o = {};
+export {
+  o as __exports
+};

package/_virtual/format-info.js

@@ -0,0 +1,4 @@
+var o = {};
+export {
+  o as __exports
+};

package/_virtual/galois-field.js

@@ -0,0 +1,4 @@
+var a = {};
+export {
+  a as __exports
+};

package/_virtual/getOptionsFromElement.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};