vlite3 0.0.8 → 0.0.9

package/README.md

@@ -16,23 +16,19 @@ npm install vlite3
 yarn add vlite3
 ```
 
-## Configuration
+## 2. Tailwind CSS Setup (Tailwind v4)
 
-### 1. Import Styles
-
-Import the library's base styles (for custom component styles) in your main entry file (e.g., `main.ts` or `App.vue`):
+`vite.config.ts`
 
 ```ts
-import 'vlite3/style.css'
-```
-
-### 2. Tailwind CSS Setup
-
-This library relies on Tailwind CSS for utility classes. You must configure your project to scan the library's files so that the necessary classes are generated.
+import tailwindcss from '@tailwindcss/vite'
 
-#### Tailwind CSS v4
+export default defineConfig({
+  plugins: [vue(), tailwindcss()],
+})
+```
 
-If you are using the new CSS-first configuration, add the source path:
+`style.css`
 
 ```css
 @import 'tailwindcss';
@@ -42,7 +38,7 @@ If you are using the new CSS-first configuration, add the source path:
 @source "../node_modules/vlite3";
 ```
 
-## Usage
+## 3. Usage
 
 Import components directly in your Vue files:
 
@@ -52,9 +48,152 @@ import { Button, Input } from 'vlite3'
 </script>
 
 <template>
-	<div class="p-4 space-y-4">
-		<Button>Click Me</Button>
-		<Input placeholder="Type here..." />
-	</div>
+  <div class="p-4 space-y-4">
+    <Button>Click Me</Button>
+    <Input placeholder="Type here..." />
+  </div>
 </template>
 ```
+
+## 🎨 Theming & Customization
+
+vlite3 uses a semantic theming system inspired by **shadcn/ui** and compatible with **Tailwind CSS v4**. All colors are defined as CSS variables, making it easy to customize the look and feel of your application including Dark Mode support.
+
+### Semantic Colors
+
+You can customize these colors in your CSS by overriding the variables in `:root` or `.dark` classes (if you are using a class-based dark mode switcher).
+
+| Variable                   | Class Name                    | Description              | Recommended Usage                                          |
+| :------------------------- | :---------------------------- | :----------------------- | :--------------------------------------------------------- |
+| `--background`             | `bg-background`               | Default page background  | The main background color of your app.                     |
+| `--foreground`             | `text-foreground`             | Default text color       | The primary text color for content.                        |
+| `--card`                   | `bg-card`                     | Card background          | Background for cards, panels, and dialogs.                 |
+| `--card-foreground`        | `text-card-foreground`        | Card text color          | Text color inside cards.                                   |
+| `--card-muted`             | `bg-card-muted`               | Muted card background    | Secondary background area within cards.                    |
+| `--popover`                | `bg-popover`                  | Popover background       | Background for popovers, tooltips, and dropdowns.          |
+| `--popover-foreground`     | `text-popover-foreground`     | Popover text color       | Text color inside popovers.                                |
+| `--popover-muted`          | `bg-popover-muted`            | Muted popover background | Secondary area within popovers (e.g., headers).            |
+| `--primary`                | `bg-primary`                  | Primary brand color      | Used for main actions (buttons, active states).            |
+| `--primary-foreground`     | `text-primary-foreground`     | Primary text color       | Text color for content on top of primary background.       |
+| `--secondary`              | `bg-secondary`                | Secondary background     | Used for secondary actions or muted sections.              |
+| `--secondary-foreground`   | `text-secondary-foreground`   | Secondary text color     | Text color for content on top of secondary background.     |
+| `--muted`                  | `bg-muted`                    | Muted background         | Subtle backgrounds (e.g., table headers, disabled states). |
+| `--muted-foreground`       | `text-muted-foreground`       | Muted text color         | Secondary text, hints, placeholders.                       |
+| `--accent`                 | `bg-accent`                   | Accent background        | Used for hover states, selection highlights.               |
+| `--accent-foreground`      | `text-accent-foreground`      | Accent text color        | Text color on accent backgrounds.                          |
+| `--destructive`            | `bg-destructive`              | Destructive color        | Used for error states and destructive actions.             |
+| `--destructive-foreground` | `text-destructive-foreground` | Destructive text color   | Text color on destructive backgrounds.                     |
+| `--border`                 | `border`                      | Default border color     | Borders for inputs, cards, and dividers.                   |
+| `--input`                  | `border-input`                | Input border color       | Borders specifically for form inputs.                      |
+| `--ring`                   | `ring-ring`                   | Focus ring color         | Outline color for focused elements.                        |
+| `--radius`                 | `rounded-radius`              | Border radius            | Global border radius for components.                       |
+
+### Extended Color Variants
+
+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.                                                            |
+
+**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>
+```
+
+### Additional Colors
+
+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.      |
+| `--color-danger`  | `text-danger`, `bg-danger`   | Alias for destructive in some contexts. |
+
+### Example Customization
+
+To customize the theme, simply override the CSS variables in your main CSS file:
+
+```css
+@layer base {
+  :root {
+    --primary: #3b82f6; /* Blue-500 */
+    --primary-foreground: #ffffff;
+    --radius: 0.75rem;
+  }
+
+  .dark {
+    --primary: #60a5fa; /* Blue-400 */
+    --primary-foreground: #000000;
+  }
+}
+```
+
+## ✅ Components
+
+- **Button**
+- **ButtonGroup**
+- **Icon**
+- **Label**
+- **Badge**
+- **Chip**
+- **Logo**
+- **Navbar**
+- **SidebarMenu**
+- **SidePanel**
+- **Masonry Grid**
+- **ThemeToggle**
+
+### Inputs & Forms
+
+- **Input**
+- **Textarea**
+- **CheckBox**
+- **Switch**
+- **ChoiceBox**
+- **Slider**
+- **OTPInput**
+- **DatePicker**
+- **ColorPicker**
+- **FilePicker**
+- **AvatarUploader**
+- **IconPicker**
+- **MultiSelect**
+- **Form**
+- **CustomFields**
+
+### Data Display
+
+- **Avatar**
+- **Accordion**
+- **Carousel**
+- **DataTable**
+- **Pagination**
+- **Timeline**
+- **Heatmap**
+- **PricingPlan**
+- **FileTree**
+- **Workbook**
+- **Tabes**
+
+### Feedback & Overlays
+
+- **Alert**
+- **Modal**
+- **ConfirmationModal**
+- **ToastNotification**
+- **Tooltip**
+- **Dropdown**

package/components/DatePicker.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as v, computed as r, openBlock as g, createBlock as h, unref as u, withCtx as m, createElementVNode as p, createVNode as c, renderSlot as V, mergeProps as w } from "vue";
+import { defineComponent as v, computed as r, openBlock as h, createBlock as g, unref as u, withCtx as m, createElementVNode as p, createVNode as c, renderSlot as V, mergeProps as w } from "vue";
 import D from "./Button.vue.js";
 import y from "./Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
@@ -21,24 +21,22 @@ const P = { class: "min-w-[300px] overflow-hidden" }, N = /* @__PURE__ */ v({
   },
   emits: ["update:modelValue", "onChange"],
   setup(t, { emit: d }) {
-    const n = t, l = d, a = r({
+    const n = t, i = d, a = r({
       get: () => n.modelValue ?? n.value,
       set: (e) => {
-        l("update:modelValue", e), l("onChange", e);
+        i("update:modelValue", e), i("onChange", e);
       }
-    }), s = (e) => e instanceof Date ? e.getHours() !== 0 || e.getMinutes() !== 0 : typeof e == "string" ? e.includes("T") || /\d{2}:\d{2}/.test(e) : !1, o = r(() => {
+    }), s = (e) => e instanceof Date ? e.getHours() !== 0 || e.getMinutes() !== 0 : typeof e == "string" ? e.includes("T") || /\d{2}:\d{2}/.test(e) : !1, l = r(() => {
       if (!a.value) return "";
       try {
-        console.log("actualValue.value :>> ", a.value);
         const e = new Date(a.value);
         if (isNaN(e.getTime())) return String(a.value);
-        console.log("d :>> ", e);
-        const i = n.mode === "dateTime" && s(a.value);
+        const o = n.mode === "dateTime" && s(a.value);
         return e.toLocaleDateString("en-US", {
           month: "short",
           day: "numeric",
           year: "numeric",
-          ...i ? { hour: "2-digit", minute: "2-digit" } : {}
+          ...o ? { hour: "2-digit", minute: "2-digit" } : {}
         });
       } catch {
         return String(a.value);
@@ -46,7 +44,7 @@ const P = { class: "min-w-[300px] overflow-hidden" }, N = /* @__PURE__ */ v({
     }), f = (e) => {
       a.value = e;
     };
-    return (e, i) => (g(), h(u(y), {
+    return (e, o) => (h(), g(u(y), {
       position: "bottom-start",
       class: "w-full",
       teleport: t.teleport
@@ -54,10 +52,10 @@ const P = { class: "min-w-[300px] overflow-hidden" }, N = /* @__PURE__ */ v({
       trigger: m(() => [
         V(e.$slots, "default", {
           value: a.value,
-          displayValue: o.value
+          displayValue: l.value
         }, () => [
           c(D, w({
-            text: o.value || t.placeholder || "Select date",
+            text: l.value || t.placeholder || "Select date",
             variant: t.variant || "outline",
             size: t.size || "md",
             icon: t.icon || "lucide:calendar"

package/components/Form/Form.vue.d.ts

@@ -1,5 +1,5 @@
 import { IForm, IFormStep, IFormSubmitPayload } from './types';
-import { InputVariant, InputSize, InputRounded, TimelineTextPosition } from '../../types';
+import { InputVariant, InputSize, InputRounded, TimelineTextPosition, ButtonProps } from '../../types';
 interface Props {
     /** Schema - single array or grouped arrays */
     schema: IForm[] | IForm[][];
@@ -23,6 +23,7 @@ interface Props {
     tabs?: IFormStep[];
     /** Submit button text */
     submitText?: string;
+    submitProps?: ButtonProps;
     /** Cancel button text */
     cancelText?: string;
     /** Show cancel button */

package/components/Form/Form.vue.js

@@ -1,7 +1,7 @@
 import o from "./Form.vue2.js";
 /* empty css          */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-e2e80954"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-25a5775d"]]);
 export {
   p as default
 };

package/components/Form/Form.vue2.js

@@ -1,27 +1,27 @@
-import { defineComponent as K, computed as d, ref as O, watch as Q, openBlock as i, createElementBlock as o, withModifiers as W, normalizeClass as f, createVNode as F, createCommentVNode as u, unref as t, Fragment as X, renderList as Y, createElementVNode as U, toDisplayString as k, renderSlot as Z, createBlock as x } from "vue";
-import { useForm as I } from "./composables/useForm.js";
+import { defineComponent as K, computed as d, ref as O, watch as Q, openBlock as i, createElementBlock as r, withModifiers as W, normalizeClass as f, createVNode as F, createCommentVNode as u, unref as t, Fragment as X, renderList as Y, createElementVNode as U, toDisplayString as k, renderSlot as Z, createBlock as x, mergeProps as I } from "vue";
+import { useForm as _ } from "./composables/useForm.js";
 import D from "./FormFields.vue.js";
-import N from "../Button.vue.js";
-import _ from "../Timeline.vue.js";
-const ee = {
+import p from "../Button.vue.js";
+import ee from "../Timeline.vue.js";
+const te = {
   key: 0,
   class: "form-timeline mb-18"
-}, te = {
+}, ae = {
   key: 1,
   class: "form-fields-single"
-}, ae = {
+}, ie = {
   key: 2,
   class: "form-groups space-y-6"
-}, ie = { class: "text-base font-semibold text-foreground" }, se = {
+}, se = { class: "text-base font-semibold text-foreground" }, le = {
   key: 0,
   class: "text-sm text-muted-foreground mt-1"
-}, le = { class: "form-group-body p-6" }, ne = {
+}, ne = { class: "form-group-body p-6" }, re = {
   key: 3,
   class: "form-step"
-}, oe = { class: "text-lg font-semibold text-foreground" }, re = {
+}, oe = { class: "text-lg font-semibold text-foreground" }, ue = {
   key: 0,
   class: "text-sm text-muted-foreground mt-1"
-}, be = /* @__PURE__ */ K({
+}, ye = /* @__PURE__ */ K({
   __name: "Form",
   props: {
     schema: {},
@@ -35,6 +35,7 @@ const ee = {
     groupHeadingsDescription: { default: () => [] },
     tabs: {},
     submitText: { default: "Submit" },
+    submitProps: {},
     cancelText: { default: "Cancel" },
     showCancel: { type: Boolean, default: !1 },
     isUpdate: { type: Boolean, default: !1 },
@@ -47,26 +48,26 @@ const ee = {
   },
   emits: ["onSubmit", "onCancel", "onStepChange"],
   setup(e, { emit: M }) {
-    const s = e, m = M, h = d(() => !s.schema || s.schema.length === 0 ? !1 : Array.isArray(s.schema[0])), r = d(() => s.tabs && s.tabs.length > 0 && h.value), a = O(0), w = d(() => s.tabs ? s.tabs.map((l, n) => ({
+    const s = e, m = M, h = d(() => !s.schema || s.schema.length === 0 ? !1 : Array.isArray(s.schema[0])), o = d(() => s.tabs && s.tabs.length > 0 && h.value), a = O(0), P = d(() => s.tabs ? s.tabs.map((l, n) => ({
       id: l.id?.toString() || n.toString(),
       title: l.title,
       icon: l.icon,
       description: l.description,
       status: n < a.value ? "completed" : n === a.value ? "current" : "upcoming"
-    })) : []), g = d(() => h.value ? s.schema : [s.schema]), R = d(() => r.value ? g.value[a.value] || [] : []), {
+    })) : []), g = d(() => h.value ? s.schema : [s.schema]), w = d(() => o.value ? g.value[a.value] || [] : []), {
       formValues: b,
       errors: y,
-      isSubmitting: p,
+      isSubmitting: N,
       handleFieldChange: A,
       validateField: G,
-      validateAll: ue,
+      validateAll: de,
       isFieldVisible: S,
       isFieldDisabled: C,
       isFieldReadonly: V,
-      getFieldValue: de,
+      getFieldValue: ce,
       handleSubmit: $,
-      flatSchema: ce
-    } = I({
+      flatSchema: me
+    } = _({
       schema: s.schema,
       values: s.values,
       isUpdate: s.isUpdate,
@@ -83,22 +84,22 @@ const ee = {
     const z = (l, n) => {
       A(l, n.value, n.data);
     }, E = () => {
-      if (!r.value) return !0;
-      const l = R.value;
+      if (!o.value) return !0;
+      const l = w.value;
       let n = !0;
       for (const v of l) {
         if (!S(v) || C(v)) continue;
         G(v) && (n = !1);
       }
       return n;
-    }, L = d(() => r.value ? a.value < g.value.length - 1 : !1), B = d(() => r.value ? a.value > 0 : !1), P = d(() => r.value ? a.value === g.value.length - 1 : !0), T = () => {
+    }, L = d(() => o.value ? a.value < g.value.length - 1 : !1), R = d(() => o.value ? a.value > 0 : !1), B = d(() => o.value ? a.value === g.value.length - 1 : !0), T = () => {
       L.value && E() && (a.value++, m("onStepChange", a.value));
     }, j = () => {
-      B.value && (a.value--, m("onStepChange", a.value));
+      R.value && (a.value--, m("onStepChange", a.value));
     }, q = (l, n) => {
       n <= a.value && (a.value = n, m("onStepChange", a.value));
     }, H = async () => {
-      if (r.value && !P.value) {
+      if (o.value && !B.value) {
         T();
         return;
       }
@@ -106,13 +107,13 @@ const ee = {
     }, J = () => {
       m("onCancel");
     };
-    return (l, n) => (i(), o("form", {
+    return (l, n) => (i(), r("form", {
       class: f(["form-container", s.class]),
       onSubmit: W(H, ["prevent"])
     }, [
-      r.value && w.value.length > 0 ? (i(), o("div", ee, [
-        F(_, {
-          steps: w.value,
+      o.value && P.value.length > 0 ? (i(), r("div", te, [
+        F(ee, {
+          steps: P.value,
           activeStep: a.value,
           direction: "horizontal",
           textPosition: e.timelineTextPosition,
@@ -120,19 +121,19 @@ const ee = {
           onStepClick: q
         }, null, 8, ["steps", "activeStep", "textPosition"])
       ])) : u("", !0),
-      h.value ? h.value && !r.value ? (i(), o("div", ae, [
-        (i(!0), o(X, null, Y(g.value, (v, c) => (i(), o("div", {
+      h.value ? h.value && !o.value ? (i(), r("div", ie, [
+        (i(!0), r(X, null, Y(g.value, (v, c) => (i(), r("div", {
           key: c,
           class: f(["form-group border rounded-lg overflow-hidden", e.groupClass])
         }, [
-          e.groupsHeadings?.[c] ? (i(), o("div", {
+          e.groupsHeadings?.[c] ? (i(), r("div", {
             key: 0,
             class: f(["form-group-header bg-muted/50 px-6 py-4 border-b", e.headerClass])
           }, [
-            U("h3", ie, k(e.groupsHeadings[c]), 1),
-            e.groupHeadingsDescription?.[c] ? (i(), o("p", se, k(e.groupHeadingsDescription[c]), 1)) : u("", !0)
+            U("h3", se, k(e.groupsHeadings[c]), 1),
+            e.groupHeadingsDescription?.[c] ? (i(), r("p", le, k(e.groupHeadingsDescription[c]), 1)) : u("", !0)
           ], 2)) : u("", !0),
-          U("div", le, [
+          U("div", ne, [
             F(D, {
               schema: v,
               values: t(b),
@@ -149,16 +150,16 @@ const ee = {
             }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
           ])
         ], 2))), 128))
-      ])) : r.value ? (i(), o("div", ne, [
-        e.tabs?.[a.value] ? (i(), o("div", {
+      ])) : o.value ? (i(), r("div", re, [
+        e.tabs?.[a.value] ? (i(), r("div", {
           key: 0,
           class: f(["form-step-header mb-6", e.headerClass])
         }, [
           U("h2", oe, k(e.tabs[a.value].title), 1),
-          e.tabs[a.value].description ? (i(), o("p", re, k(e.tabs[a.value].description), 1)) : u("", !0)
+          e.tabs[a.value].description ? (i(), r("p", ue, k(e.tabs[a.value].description), 1)) : u("", !0)
         ], 2)) : u("", !0),
         F(D, {
-          schema: R.value,
+          schema: w.value,
           values: t(b),
           errors: t(y),
           variant: e.variant,
@@ -171,7 +172,7 @@ const ee = {
           isFieldReadonly: t(V),
           onChange: z
         }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
-      ])) : u("", !0) : (i(), o("div", te, [
+      ])) : u("", !0) : (i(), r("div", ae, [
         F(D, {
           schema: e.schema,
           values: t(b),
@@ -190,22 +191,22 @@ const ee = {
       Z(l.$slots, "default", {
         values: t(b),
         errors: t(y),
-        isSubmitting: t(p),
+        isSubmitting: t(N),
         handleSubmit: H
       }, void 0, !0),
-      e.footer ? (i(), o("div", {
+      e.footer ? (i(), r("div", {
         key: 4,
         class: f(["form-footer mt-6 flex items-center justify-end gap-3", e.footerClass])
       }, [
-        e.showCancel ? (i(), x(N, {
+        e.showCancel ? (i(), x(p, {
           key: 0,
           type: "button",
           variant: "outline",
           text: e.cancelText,
-          disabled: e.loading || t(p),
+          disabled: e.loading || t(N),
           onClick: J
         }, null, 8, ["text", "disabled"])) : u("", !0),
-        r.value && B.value ? (i(), x(N, {
+        o.value && R.value ? (i(), x(p, {
           key: 1,
           type: "button",
           variant: "outline",
@@ -213,24 +214,25 @@ const ee = {
           text: "Previous",
           onClick: j
         })) : u("", !0),
-        r.value && !P.value ? (i(), x(N, {
+        o.value && !B.value ? (i(), x(p, {
           key: 2,
           type: "button",
           variant: "primary",
           text: "Next",
           iconRight: "lucide:arrow-right",
           onClick: T
-        })) : (i(), x(N, {
+        })) : (i(), x(p, I({
           key: 3,
           type: "submit",
           variant: "primary",
-          text: e.submitText,
-          loading: e.loading || t(p)
-        }, null, 8, ["text", "loading"]))
+          text: e.submitText
+        }, e.submitProps, {
+          loading: e.loading || t(N)
+        }), null, 16, ["text", "loading"]))
       ], 2)) : u("", !0)
     ], 34));
   }
 });
 export {
-  be as default
+  ye as default
 };

package/components/Form/composables/useFileUpload.d.ts

@@ -5,17 +5,11 @@ export interface FileUploadResult {
     fileSize?: number;
 }
 /**
- * Composable for handling file uploads
+ * Composable for handling file uploads.
  *
- * This is a placeholder implementation. Replace the handleUploadFile
- * function body with your actual API integration.
- *
- * @example
- * ```ts
- * const { handleUploadFile, loading } = useFileUpload()
- *
- * const url = await handleUploadFile(file, folderId)
- * ```
+ * This composable automatically checks the global VLite configuration
+ * for a registered 'upload' service. If found, it uses that service.
+ * Otherwise, it falls back to a mock implementation.
  */
 export declare function useFileUpload(): {
     handleUploadFile: (file: File | {

package/components/Form/composables/useFileUpload.js

@@ -1,32 +1,40 @@
-import { ref as s } from "vue";
-function f() {
-  const l = s(!1), r = s(null), t = async (o, c) => {
-    l.value = !0, r.value = null;
+import { ref as u } from "vue";
+import { useVLiteConfig as d } from "../../../core/config.js";
+function g() {
+  const s = u(!1), a = u(null), i = d(), c = async (r, t) => {
     try {
-      const e = o instanceof File ? o : o.file;
-      await new Promise((i) => setTimeout(i, 800));
-      const a = Math.random().toString(36).substring(7), n = e.name.replace(/[^a-zA-Z0-9.-]/g, "_");
-      return `https://storage.googleapis.com/vlite-bucket/${a}/${n}`;
+      const e = r instanceof File ? r : r.file;
+      if (i.services?.upload)
+        try {
+          return await i.services.upload(e, t);
+        } catch (o) {
+          throw o instanceof Error ? o : new Error("External upload service failed");
+        }
+      await new Promise((o) => setTimeout(o, 800));
+      const l = Math.random().toString(36).substring(7), n = e.name.replace(/[^a-zA-Z0-9.-]/g, "_");
+      return `https://storage.googleapis.com/vlite-bucket/${l}/${n}`;
     } catch (e) {
-      return r.value = e instanceof Error ? e.message : "Upload failed", console.error("[useFileUpload] Error:", e), null;
-    } finally {
-      l.value = !1;
+      const l = e instanceof Error ? e.message : "Upload failed";
+      return console.error("[useFileUpload] Error:", e), a.value = l, null;
     }
   };
   return {
-    handleUploadFile: t,
-    handleUploadFiles: async (o, c) => {
-      const e = [];
-      for (const a of o) {
-        const n = await t(a);
-        e.push(n ?? null);
+    handleUploadFile: c,
+    handleUploadFiles: async (r, t) => {
+      s.value = !0, a.value = null;
+      try {
+        const e = r.map((n) => c(n, t));
+        return await Promise.all(e);
+      } catch (e) {
+        return a.value = e instanceof Error ? e.message : "One or more uploads failed", console.error("[useFileUpload] Parallel Upload Error:", e), [];
+      } finally {
+        s.value = !1;
       }
-      return e;
     },
-    loading: l,
-    error: r
+    loading: s,
+    error: a
   };
 }
 export {
-  f as useFileUpload
+  g as useFileUpload
 };