vlite3 0.2.1 → 0.2.2

package/README.md

@@ -4,14 +4,10 @@ A lightweight Vue 3 UI component library built with Tailwind CSS, created for pe
 
 ## Installation
 
-### NPM
-
 ```bash
 npm install vlite3
 ```
 
-### Yarn
-
 ```bash
 yarn add vlite3
 ```
@@ -55,34 +51,148 @@ import { Button, Input } from 'vlite3'
 </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         | Little Gray Background for cards, containers, surfece, panels, and dialogs. |
-| `--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`                  | `text-muted`                  | Muted Text              | Secondary text, Unactive Link, description.                                 |
-| `--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`                     | Border radius           | Global border radius for components.                                        |
+## 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.
+
+### Setting up the Plugin
+
+In your `main.ts` or `main.js`, import `createVLite` and `vScrollReveal` and register your services:
+
+```typescript
+import { createApp } from 'vue'
+import App from './App.vue'
+import { env, createVLite, vScrollReveal, GoogleSignInPlugin } from 'vlite3'
+
+const app = createApp(App)
+
+// Register global directives
+app.directive('scroll-reveal', vScrollReveal)
+
+app.use(GoogleSignInPlugin, {
+  clientId: env.VITE_GOOGLE_CLIENT_ID,
+})
+
+// Initialize VLite with custom configuration
+const vlite = createVLite({
+  services: {
+    /**
+     * Global File Upload Handler
+     *
+     * This function will be called automatically by:
+     * - useFileUpload() composable
+     * - Form components (when using 'file', 'fileUploader', or 'avatarUpload' types)
+     *
+     * @param file - The File object to upload
+     * @param folderId - (Optional) Folder ID passed from component props
+     * @returns Promise<string> - The public URL of the uploaded file
+     */
+    upload: async (file, folderId) => {
+      // Example: Upload to your own backend
+      const formData = new FormData()
+      formData.append('file', file)
+      if (folderId) formData.append('folder_id', folderId)
+
+      // Replace with your actual API call (e.g., Axios, Fetch)
+      const response = await fetch(
+        '[https://api.yourdomain.com/v1/upload](https://api.yourdomain.com/v1/upload)',
+        {
+          method: 'POST',
+          body: formData,
+          headers: {
+            Authorization: 'Bearer ...',
+          },
+        }
+      )
+
+      if (!response.ok) throw new Error('Upload failed')
+
+      const data = await response.json()
+      return data.url // MUST return the file URL string
+    },
+  },
+})
+
+app.use(vlite)
+app.mount('#app')
+```
+
+### How it works
+
+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
+
+Import components directly in your Vue files:
+
+```vue
+<script setup>
+import { Button, Input, Form } from 'vlite3'
+
+// The form will automatically use the global upload service defined in main.ts
+const schema = [
+  {
+    name: 'avatar',
+    label: 'Profile Picture',
+    type: 'avatarUpload',
+  },
+  {
+    name: 'documents',
+    label: 'Attachments',
+    type: 'fileUploader',
+    props: { multiple: true },
+  },
+]
+
+const handleSubmit = (payload) => {
+  // payload.values.avatar will be a URL string (e.g., "https://api...")
+  // payload.values.documents will be an array of URL strings
+  console.log(payload.values)
+}
+</script>
+
+<template>
+  <div class="">
+    <Form :schema="schema" @onSubmit="handleSubmit" />
+  </div>
+</template>
+```
+
+# 🎨 Theming & Customization
+
+Reference guide for **vlite3** and the Tailwind CSS v4 theming system. This setup uses a semantic design token approach inspired by shadcn/ui and optimized for Tailwind CSS v4.
+
+All colors are defined as CSS variables, allowing you to customize the appearance of your application with minimal effort, including full Dark Mode support.
+
+---
+
+## Semantic Colors
+
+Override these variables in `:root` or within a `.dark` class (when using class-based dark mode) to adjust your theme.
+
+| Variable                         | Utility Class                 | Description                             | Recommended Usage                               |
+| -------------------------------- | ----------------------------- | --------------------------------------- | ----------------------------------------------- |
+| `--color-background`             | `bg-background`               | Default page background (white)         | Main application background                     |
+| `--color-foreground`             | `text-foreground`             | Default text color (gray-900)           | Primary content text                            |
+| `--color-card`                   | `bg-card`                     | Card background (gray-100)              | Cards, containers, surfaces, panels, dialogs    |
+| `--color-primary`                | `bg-primary`                  | Primary brand color (blue)              | Main actions, buttons, active states            |
+| `--color-primary-foreground`     | `text-primary-foreground`     | Text on primary background (white)      | Text/icons displayed on primary elements        |
+| `--color-secondary`              | `bg-secondary`                | Secondary background (gray-200)         | Secondary actions, muted sections               |
+| `--color-secondary-foreground`   | `text-secondary-foreground`   | Text on secondary background (gray-900) | Content displayed on secondary elements         |
+| `--color-muted`                  | `bg-muted`                    | Muted background (gray-150)             | Subtle surfaces, table headers, disabled states |
+| `--color-muted`                  | `text-muted`                  | Muted text (gray-600)                   | Secondary text, inactive links, descriptions    |
+| `--color-accent`                 | `bg-accent`                   | Accent background (gray-150)            | Hover states, selection highlights              |
+| `--color-accent-foreground`      | `text-accent-foreground`      | Text on accent background (gray-900)    | Content displayed on accent elements            |
+| `--color-destructive`            | `bg-destructive`              | Destructive color (red)                 | Errors, warnings, destructive actions           |
+| `--color-destructive-foreground` | `text-destructive-foreground` | Text on destructive background (white)  | Content displayed on destructive elements       |
+| `--color-border`                 | `border`                      | Default border color (gray-250)         | Inputs, cards, dividers                         |
+| `--radius`                       | `rounded`                     | Global border radius                    | Shared radius across components                 |
+
+---
 
 ### Extended Color Variants
 
@@ -119,31 +229,17 @@ vlite3 also provides additional utility colors for specific feedback states:
 | `--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;
-  }
-}
-```
+---
 
 ## 8. Typography Scale System
 
-The system is divided into two groups:
+The typography system is organized into two complementary scales:
 
-- Compact scale (prefixed with `--text--fs-*`) for smaller text
-- Progressive scale (prefixed with `--text-fs-*`) for base and larger text
+- Compact scale (prefixed with `--text--fs-*`)
+- Progressive scale (prefixed with `--text-fs-*`)
+
+Use the progressive scale only when you need finer visual control beyond the standard Tailwind size tokens.
+For most layout and content needs, prefer the default Tailwind text sizes to maintain consistency.
 
 ### Compact Text Scale
 
@@ -156,6 +252,11 @@ The system is divided into two groups:
 --text--fs-6: 0.6em;
 --text--fs-7: 0.55em;
 --text--fs-8: 0.5em;
+```
+
+### Progressive Text Scale
+
+```css
 --text-fs-0.5: 1.05em;
 --text-fs-1: 1.1em;
 --text-fs-1.5: 1.14em;
@@ -176,13 +277,19 @@ The system is divided into two groups:
 --text-fs-9: 1.8em;
 --text-fs-9.5: 2em;
 --text-fs-10: 2.5em;
+```
+
+### Tailwind Size Tokens
 
+```css
 --text-xs: 0.75rem --text-sm: 0.875rem --text-base: 1rem --text-lg: 1.125rem --text-xl: 1.25rem
   --text-2xl: 1.5rem --text-3xl: 1.875rem --text-4xl: 2.25rem --text-5xl: 3rem --text-6xl: 4rem;
 ```
 
 ---
 
+### Usage Examples
+
 ```html
 <p class="text-fs-2">Body text</p>
 
@@ -191,6 +298,18 @@ The system is divided into two groups:
 <h1 class="text-xl font-semibold">Page Title</h1>
 ```
 
+## Hard Rules
+
+Follow these rules strictly to ensure visual consistency and predictable styling across the system:
+
+- Use `border` instead of `border-border` (the default border color (gray-250) is already applied).
+- 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
+
+---
+
 ## ✅ Components
 
 - **Button**
@@ -251,7 +370,7 @@ The system is divided into two groups:
 - **ProgressBar**
 - **Spinner**
 
-# Complete reference for AI agents and developers:
+## Complete reference for AI agents and developers:
 
 - [llms.txt](https://github.com/safdar-azeem/vlite3/blob/main/llms.txt).
 - [llms-theming.txt](https://github.com/safdar-azeem/vlite3/blob/main/llms-theming.txt).

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as G, defineAsyncComponent as J, ref as B, computed as I, watch as C, toRef as Q, onMounted as W, onBeforeUnmount as X, openBlock as o, createElementBlock as c, createVNode as p, createCommentVNode as u, renderSlot as v, createElementVNode as g, unref as n, normalizeStyle as Y, normalizeClass as T, createBlock as m, Fragment as N, renderList as Z, withCtx as V, toDisplayString as ee, createSlots as te, mergeProps as le, nextTick as se } from "vue";
+import { defineComponent as G, defineAsyncComponent as J, ref as B, computed as I, watch as C, toRef as Q, onMounted as W, onBeforeUnmount as X, openBlock as o, createElementBlock as c, createVNode as x, createCommentVNode as i, renderSlot as v, unref as n, normalizeStyle as Y, normalizeClass as T, createBlock as m, Fragment as N, renderList as Z, withCtx as V, createElementVNode as p, toDisplayString as ee, createSlots as te, mergeProps as le, nextTick as se } from "vue";
 import S from "../Icon.vue.js";
 import oe from "../Input.vue.js";
 import ne from "./DropdownItem.vue.js";
@@ -22,7 +22,7 @@ const ie = ["dir"], ue = {
   key: 3,
   class: "flex justify-center py-2"
 }, be = {
-  key: 2,
+  key: 3,
   class: "shrink-0 border-t mt-1 pt-1"
 }, Ie = /* @__PURE__ */ G({
   __name: "DropdownMenu",
@@ -45,34 +45,34 @@ const ie = ["dir"], ue = {
     direction: { default: "ltr" }
   },
   emits: ["select", "close", "load-more", "search"],
-  setup(r, { emit: _ }) {
-    const j = J(() => import("./Dropdown.vue2.js")), t = r, i = _, M = B(null), f = B(""), { getMenuId: D, getAllRecursiveIds: E } = ae(), P = I(() => t.remote ? t.searchable : t.searchable && (t.options?.length || 0) > 9);
-    let k = null;
+  setup(r, { emit: j }) {
+    const D = J(() => import("./Dropdown.vue2.js")), t = r, u = j, $ = B(null), f = B(""), { getMenuId: E, getAllRecursiveIds: P } = ae(), _ = I(() => t.remote ? t.searchable : t.searchable && (t.options?.length || 0) > 9);
+    let g = null;
     C(f, (e) => {
-      t.remote && (k && clearTimeout(k), k = setTimeout(() => {
-        e && i("search", e);
+      t.remote && (g && clearTimeout(g), g = setTimeout(() => {
+        e && u("search", e);
       }, 100));
     });
     const H = (e) => {
       const s = e.target;
-      s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && t.hasMore && !t.loading && i("load-more");
-    }, b = (e, s) => {
-      e.disabled || i("select", e);
+      s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && t.hasMore && !t.loading && u("load-more");
+    }, k = (e, s) => {
+      e.disabled || u("select", e);
     }, {
       focusedIndex: h,
-      isKeyboardMode: w,
+      isKeyboardMode: b,
       filteredOptions: R,
       // rename
-      handleKeyDown: $,
+      handleKeyDown: M,
       handleMouseMove: O,
-      onMouseEnterItem: x,
+      onMouseEnterItem: w,
       scrollToIndex: z
     } = ce({
       options: Q(t, "options"),
       searchQuery: f,
-      containerRef: M,
-      emit: (e, ...s) => i(e, ...s),
-      handleSelect: (e, s) => b(e)
+      containerRef: $,
+      emit: (e, ...s) => u(e, ...s),
+      handleSelect: (e, s) => k(e)
     }), y = I(() => t.remote ? f.value ? t.options : t.cachedOptions.length ? t.cachedOptions : t.options : R.value), A = (e) => {
       if (!(!t.selected || typeof t.selected != "object") && e.key && e.key in t.selected)
         return t.selected[e.key];
@@ -84,7 +84,7 @@ const ie = ["dir"], ue = {
         key: s.key,
         data: s.data
       };
-      i("select", l);
+      u("select", l);
     }, U = (e, s) => {
       let l = s.value;
       e.key && (l = { [e.key]: l });
@@ -94,7 +94,7 @@ const ie = ["dir"], ue = {
         data: s.data,
         key: e.key
       };
-      i("select", d);
+      u("select", d);
     }, q = async () => {
       await se();
       let e = -1;
@@ -106,15 +106,15 @@ const ie = ["dir"], ue = {
         h.value = -1;
       }
     ), W(() => {
-      q(), window.addEventListener("keydown", $);
+      q(), window.addEventListener("keydown", M);
     }), X(() => {
-      window.removeEventListener("keydown", $);
+      window.removeEventListener("keydown", M);
     }), (e, s) => (o(), c("div", {
       class: "dropdown-menu w-full min-w-[150px] flex flex-col",
       dir: r.direction
     }, [
-      P.value ? (o(), c("div", ue, [
-        p(oe, {
+      _.value ? (o(), c("div", ue, [
+        x(oe, {
           modelValue: f.value,
           "onUpdate:modelValue": s[0] || (s[0] = (l) => f.value = l),
           placeholder: "Search...",
@@ -124,13 +124,14 @@ const ie = ["dir"], ue = {
           variant: "transparent",
           "show-clear-button": !1
         }, null, 8, ["modelValue"])
-      ])) : u("", !0),
+      ])) : i("", !0),
       e.$slots.header ? (o(), c("div", fe, [
         v(e.$slots, "header")
-      ])) : u("", !0),
-      g("div", {
+      ])) : i("", !0),
+      t?.options.length > 0 || e.$slots.menu ? (o(), c("div", {
+        key: 2,
         ref_key: "containerRef",
-        ref: M,
+        ref: $,
         tabindex: "0",
         role: "menu",
         class: T([
@@ -142,55 +143,55 @@ const ie = ["dir"], ue = {
         (...l) => n(O) && n(O)(...l)),
         onScroll: H
       }, [
-        y.value.length === 0 && r.options?.length > 0 && !r.loading ? (o(), c("div", me, " No options found ")) : u("", !0),
+        y.value.length === 0 && r.options?.length > 0 && !r.loading ? (o(), c("div", me, " No options found ")) : i("", !0),
         r.layout === "grouped" ? (o(), m(de, {
           key: 1,
           options: y.value,
           selected: r.selected,
           selectable: r.selectable,
           columns: r.columns,
-          onSelect: b
+          onSelect: k
         }, null, 8, ["options", "selected", "selectable", "columns"])) : (o(!0), c(N, { key: 2 }, Z(y.value, (l, d) => (o(), c(N, { key: d }, [
           l.label === "---" ? (o(), c("div", he)) : l.data?.isBoolean ? (o(), m(re, {
             key: 1,
             option: l,
             value: F(l),
-            focused: n(w) && n(h) === d,
+            focused: n(b) && n(h) === d,
             onChange: K,
-            onMouseenter: (a) => n(x)(d)
-          }, null, 8, ["option", "value", "focused", "onMouseenter"])) : l.children && l.children.length > 0 ? (o(), m(n(j), {
+            onMouseenter: (a) => n(w)(d)
+          }, null, 8, ["option", "value", "focused", "onMouseenter"])) : l.children && l.children.length > 0 ? (o(), m(n(D), {
             key: 2,
             position: l.position || t.nestedPosition,
             offset: l.offset || t.nestedOffset,
             class: "w-full",
             options: l.children,
             selected: A(l),
-            menuId: n(D)(l),
+            menuId: n(E)(l),
             nestedPosition: t.nestedPosition,
             nestedOffset: t.nestedOffset,
             selectable: t.selectable,
-            ignoreClickOutside: n(E)(l.children),
+            ignoreClickOutside: n(P)(l.children),
             direction: r.direction,
             onOnSelect: (a) => U(l, a)
           }, {
             trigger: V(() => [
-              g("div", {
+              p("div", {
                 "data-dropdown-item": "",
                 class: T(["relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none transition-colors justify-between w-full", [
-                  n(w) && n(h) === d ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
+                  n(b) && n(h) === d ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
                   l.disabled ? "opacity-50 cursor-not-allowed" : ""
                 ]]),
-                onMouseenter: (a) => n(x)(d)
+                onMouseenter: (a) => n(w)(d)
               }, [
-                g("div", ve, [
+                p("div", ve, [
                   l.icon ? (o(), m(S, {
                     key: 0,
                     icon: l.icon,
                     class: "mr-2 h-4 w-4 shrink-0 mt-0.5"
-                  }, null, 8, ["icon"])) : u("", !0),
-                  g("span", ge, ee(l.label), 1)
+                  }, null, 8, ["icon"])) : i("", !0),
+                  p("span", ge, ee(l.label), 1)
                 ]),
-                p(S, {
+                x(S, {
                   icon: r.direction === "rtl" ? "lucide:chevron-left" : "lucide:chevron-right",
                   class: "h-4 w-4 text-muted-foreground shrink-0 ml-2"
                 }, null, 8, ["icon"])
@@ -202,10 +203,10 @@ const ie = ["dir"], ue = {
             option: l,
             index: d,
             selected: L(l),
-            focused: n(w) && n(h) === d,
+            focused: n(b) && n(h) === d,
             selectable: r.selectable,
-            onClick: (a) => b(l),
-            onMouseenter: (a) => n(x)(d)
+            onClick: (a) => k(l),
+            onMouseenter: (a) => n(w)(d)
           }, te({ _: 2 }, [
             e.$slots.item ? {
               name: "default",
@@ -217,16 +218,16 @@ const ie = ["dir"], ue = {
           ]), 1032, ["option", "index", "selected", "focused", "selectable", "onClick", "onMouseenter"]))
         ], 64))), 128)),
         r.loading ? (o(), c("div", ke, [
-          p(S, {
+          x(S, {
             icon: "lucide:loader-2",
             class: "w-4 h-4 animate-spin text-muted-foreground"
           })
-        ])) : u("", !0),
+        ])) : i("", !0),
         v(e.$slots, "menu")
-      ], 38),
+      ], 38)) : i("", !0),
       e.$slots.footer ? (o(), c("div", be, [
         v(e.$slots, "footer")
-      ])) : u("", !0)
+      ])) : i("", !0)
     ], 8, ie));
   }
 });

package/components/GoogleLogin.vue.d.ts

@@ -1,6 +1,6 @@
 export interface GoogleLoginProps {
-    clientId: string;
     buttonText?: string;
+    btnClass?: string;
     variant?: any;
     size?: any;
     rounded?: any;
@@ -10,7 +10,7 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {
-            login: () => Promise<void>;
+            login: () => void;
             loading: boolean;
             disabled: boolean;
         }): any;
@@ -31,7 +31,7 @@ declare const __VLS_component: import('vue').DefineComponent<GoogleLoginProps, {
     variant: any;
     rounded: any;
     buttonText: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/components/GoogleLogin.vue.js

@@ -0,0 +1,60 @@
+import { defineComponent as d, ref as u, openBlock as c, createElementBlock as f, renderSlot as m, createVNode as g, normalizeClass as v, unref as b, withCtx as C, createElementVNode as h, toDisplayString as k } from "vue";
+import { useTokenClient as w } from "../node_modules/vue3-google-signin/dist/index.es.js";
+import z from "./Button.vue.js";
+const x = { class: "google-login-wrapper inline-block w-full" }, y = { class: "font-medium" }, L = /* @__PURE__ */ d({
+  __name: "GoogleLogin",
+  props: {
+    buttonText: { default: "Sign in with Google" },
+    btnClass: {},
+    variant: { default: "outline" },
+    size: { default: "md" },
+    rounded: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["success", "error"],
+  setup(e, { emit: n }) {
+    const s = e, o = n, l = u(!1), { login: i, isReady: r } = w({
+      onSuccess: (a) => {
+        l.value = !1, o("success", a);
+      },
+      onError: (a) => {
+        l.value = !1, o("error", a);
+      }
+    }), t = () => {
+      if (!(s.disabled || l.value)) {
+        l.value = !0;
+        try {
+          i();
+        } catch (a) {
+          l.value = !1, o("error", a);
+        }
+      }
+    };
+    return (a, S) => (c(), f("div", x, [
+      m(a.$slots, "default", {
+        login: t,
+        loading: l.value,
+        disabled: e.disabled
+      }, () => [
+        g(z, {
+          variant: e.variant,
+          size: e.size,
+          rounded: e.rounded,
+          disabled: !b(r) || e.disabled || l.value,
+          loading: l.value,
+          class: v([e.btnClass, "w-full"]),
+          icon: "flat-color-icons:google",
+          onClick: t
+        }, {
+          default: C(() => [
+            h("span", y, k(e.buttonText), 1)
+          ]),
+          _: 1
+        }, 8, ["variant", "size", "rounded", "disabled", "loading", "class"])
+      ])
+    ]));
+  }
+});
+export {
+  L as default
+};

package/components/GoogleLogin.vue2.js

@@ -0,0 +1,4 @@
+import f from "./GoogleLogin.vue.js";
+export {
+  f as default
+};

package/components/ProgressBar/ProgressBar.vue.js

@@ -0,0 +1,7 @@
+import o from "./ProgressBar.vue2.js";
+/* empty css                 */
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-454a1505"]]);
+export {
+  m as default
+};