vlite3 0.0.9 → 0.1.0

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Safdar Azeem
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -63,30 +63,25 @@ vlite3 uses a semantic theming system inspired by **shadcn/ui** and compatible w
 
 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.                       |
+| 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-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.                                        |
 
 ### Extended Color Variants
 
@@ -197,3 +192,110 @@ To customize the theme, simply override the CSS variables in your main CSS file:
 - **ToastNotification**
 - **Tooltip**
 - **Dropdown**
+
+## 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 register your services:
+
+```typescript
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createVLite } from 'vlite3'
+
+const app = createApp(App)
+
+// 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="p-4 space-y-4">
+    <Button>Click Me</Button>
+    <Input placeholder="Type here..." />
+
+    <Form :schema="schema" @onSubmit="handleSubmit" />
+  </div>
+</template>
+```

package/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en" cl>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>vLite3</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -66,4 +66,4 @@
     "endOfLine": "auto",
     "bracketSameLine": true
   }
-}
+}

package/scripts/bundle-css.js

@@ -0,0 +1,45 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const distDir = path.resolve(__dirname, '../dist');
+const srcDir = path.resolve(__dirname, '../src/css');
+
+// Ensure dist directory exists
+if (!fs.existsSync(distDir)) {
+    fs.mkdirSync(distDir, { recursive: true });
+}
+
+// Define the order of files to concatenate
+// We recreate the structure of main.css manually but directly embedding content
+// main.css has:
+// @import 'tailwindcss';
+// @layer theme, base, components, utilities;
+
+let finalCss = `@import 'tailwindcss';\n@layer theme, base, components, utilities;\n\n`;
+
+const filesToRead = ['theme.css', 'base.css', 'input.css'];
+
+filesToRead.forEach(file => {
+    const filePath = path.join(srcDir, file);
+    if (fs.existsSync(filePath)) {
+        const content = fs.readFileSync(filePath, 'utf8');
+        finalCss += `/* --- ${file} --- */\n${content}\n\n`;
+    } else {
+        console.warn(`Warning: ${file} not found at ${filePath}`);
+    }
+});
+
+const outputPath = path.join(distDir, 'style.css');
+
+if (fs.existsSync(outputPath)) {
+    const existingCss = fs.readFileSync(outputPath, 'utf8');
+    finalCss += `/* --- Vite Generated CSS --- */\n${existingCss}\n`;
+}
+
+fs.writeFileSync(outputPath, finalCss);
+
+console.log(`CSS bundled successfully into ${outputPath}`);

package/src/App.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import Playground from './playground/Playground.vue'
+</script>
+
+<template>
+	<Playground />
+</template>

package/src/components/Accordion/Accordion.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import type { AccordionProps } from './types'
+import AccordionItem from './AccordionItem.vue'
+
+const props = withDefaults(defineProps<AccordionProps>(), {
+  allowMultiple: false,
+  variant: 'default',
+  attached: false,
+  items: () => [],
+  disabled: false,
+  showIndex: false,
+  iconVariant: 'simple',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | string[]): void
+  (e: 'change', value: string | string[]): void
+}>()
+
+// Internal state
+const internalValue = ref<string[]>([])
+
+const normalizeValue = (val: string | string[] | undefined): string[] => {
+  if (Array.isArray(val)) return val
+  if (typeof val === 'string' && val) return [val]
+  return []
+}
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    internalValue.value = normalizeValue(newVal)
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.defaultValue,
+  (newVal) => {
+    if (!props.modelValue && newVal) {
+      internalValue.value = normalizeValue(newVal)
+    }
+  },
+  { immediate: true }
+)
+
+const toggleItem = (id: string) => {
+  if (props.disabled) return
+
+  const isOpen = internalValue.value.includes(id)
+
+  if (props.allowMultiple) {
+    if (isOpen) {
+      internalValue.value = internalValue.value.filter((v) => v !== id)
+    } else {
+      internalValue.value = [...internalValue.value, id]
+    }
+  } else {
+    // Single mode
+    if (isOpen) {
+      internalValue.value = [] // Toggle off if clicking same
+    } else {
+      internalValue.value = [id]
+    }
+  }
+
+  emitChange()
+}
+
+const emitChange = () => {
+  const val = props.allowMultiple ? internalValue.value : internalValue.value[0] || ''
+  emit('update:modelValue', val)
+  emit('change', val)
+}
+
+const rootClasses = computed(() => {
+  const classes = ['w-full', props.class]
+
+  if (props.attached) {
+    // classes.push('rounded-lg overflow-hidden') -> Managed by Items for cleaner edges if separated logic used
+    // But for attached, usually the container clips.
+    classes.push('rounded-lg overflow-hidden')
+
+    // Add border to container if it's outline or default attached
+    // Solid usually doesn't have a container border if items are solid blocks?
+    // But if attached list, yes.
+    if (props.variant === 'outline' || props.variant === 'default') {
+      classes.push('border')
+    }
+    if (props.variant === 'solid') {
+      // If solid attached, usually no border or just internal dividers?
+      // Let's add border to keep it contained.
+      classes.push('border')
+    }
+  }
+
+  return classes.join(' ')
+})
+</script>
+
+<template>
+  <div :class="rootClasses">
+    <slot>
+      <template v-for="(item, index) in items" :key="item.id">
+        <AccordionItem
+          :item="item"
+          :isOpen="internalValue.includes(item.id)"
+          :variant="variant"
+          :attached="attached"
+          :disabled="disabled"
+          :index="index + 1"
+          :showIndex="showIndex"
+          :openIcon="openIcon"
+          :closeIcon="closeIcon"
+          :iconVariant="iconVariant"
+          :activeIconVariant="activeIconVariant"
+          :triggerClass="triggerClass"
+          :contentClass="contentClass"
+          :itemClass="itemClass"
+          @toggle="toggleItem">
+          <!-- Pass Slots Down -->
+          <template v-if="$slots.trigger" #trigger="{ item, open, toggle, triggerClass }">
+            <slot
+              name="trigger"
+              :item="item"
+              :open="open"
+              :toggle="toggle"
+              :triggerClass="triggerClass" />
+          </template>
+
+          <template v-if="$slots.content" #content="{ item }">
+            <slot name="content" :close="toggleItem" :item="item" />
+          </template>
+        </AccordionItem>
+      </template>
+    </slot>
+  </div>
+</template>

package/src/components/Accordion/AccordionContent.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+
+interface Props {
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
+})
+
+// In simple implementations, the open state is checked in the parent Item or here.
+// But mostly the Item decides if Content is rendered or if it is v-show.
+// For smooth animation on v-if/v-show, we need a Transition.
+
+const beforeEnter = (el: Element) => {
+  const element = el as HTMLElement
+  element.style.height = '0'
+}
+
+const enter = (el: Element) => {
+  const element = el as HTMLElement
+  element.style.height = element.scrollHeight + 'px'
+}
+
+const afterEnter = (el: Element) => {
+  const element = el as HTMLElement
+  element.style.height = 'auto'
+}
+
+const beforeLeave = (el: Element) => {
+  const element = el as HTMLElement
+  element.style.height = element.scrollHeight + 'px'
+}
+
+const leave = (el: Element) => {
+  const element = el as HTMLElement
+  element.style.height = '0'
+}
+</script>
+
+<template>
+  <Transition
+    name="accordion"
+    @before-enter="beforeEnter"
+    @enter="enter"
+    @after-enter="afterEnter"
+    @before-leave="beforeLeave"
+    @leave="leave">
+    <div class="overflow-hidden text-sm transition-all duration-300 ease-in-out">
+      <div :class="['pb-4', props.class]">
+        <slot />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.accordion-enter-active,
+.accordion-leave-active {
+  transition: height 0.3s ease-in-out;
+}
+</style>

package/src/components/Accordion/AccordionItem.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { AccordionItemSchema, AccordionVariant } from './types'
+import AccordionTrigger from './AccordionTrigger.vue'
+import AccordionContent from './AccordionContent.vue'
+
+interface Props {
+  item: AccordionItemSchema
+  isOpen: boolean
+  variant?: AccordionVariant
+  attached?: boolean
+  disabled?: boolean
+  index?: number
+  showIndex?: boolean
+  openIcon?: string
+  closeIcon?: string
+  iconVariant?: 'simple' | 'solid' | 'outline' | 'primary' | 'ghost'
+  activeIconVariant?: 'simple' | 'solid' | 'outline' | 'primary' | 'ghost'
+
+  // Classes
+  triggerClass?: string
+  contentClass?: string
+  itemClass?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  attached: false,
+  disabled: false,
+  class: '',
+  showIndex: false,
+})
+
+const emit = defineEmits<{
+  (e: 'toggle', id: string): void
+}>()
+
+const handleToggle = () => {
+  if (props.item.disabled || props.disabled) return
+  emit('toggle', props.item.id)
+}
+
+// Styling based on variant
+const containerClass = computed(() => {
+  const { variant, attached } = props
+
+  if (attached) {
+    // ATTACHED MODE (List Group)
+    const baseAttached = 'transition-all first:rounded-t-lg last:rounded-b-lg'
+    let borderClass = 'border-b last:border-0'
+
+    if (variant === 'default' || variant === 'outline') {
+      // Outline in attached usually means the Container (Accordion) has the border, items just have separators.
+      return `${baseAttached} ${borderClass}`
+    }
+    if (variant === 'solid') {
+      // Solid attached: items might alternate or just be list.
+      return `border-b last:border-0 bg-transparent`
+    }
+    if (variant === 'ghost') {
+      return 'bg-transparent border-b last:border-0'
+    }
+    return `${baseAttached} ${borderClass}`
+  }
+
+  // DETACHED MODE (Cards)
+  // 'solid': Container has border (outline) but no background, content needs to be inside.
+  if (variant === 'solid') {
+    return 'mb-2 border rounded-lg overflow-hidden transition-all duration-200'
+  }
+
+  // 'outline': Item has border.
+  if (variant === 'outline') return 'border mb-2 rounded-lg overflow-hidden'
+
+  // 'separated': distinct cards style
+  if (variant === 'separated') return 'border mb-4 rounded-lg  overflow-hidden'
+
+  if (variant === 'ghost') return 'border-none bg-transparent mb-1'
+
+  // Default Detached (Underline style usually)
+  return 'border-b'
+})
+
+// Specific Trigger Styling Logic
+const computedTriggerClass = computed(() => {
+  const { variant, attached, isOpen } = props
+  const base = props.triggerClass || ''
+
+  // Solid Variant: Trigger gets the background
+  if (variant === 'solid') {
+    return `${base} px-4 bg-muted transition-colors`
+  }
+
+  // Default/Ghost in detached: no padding usually?
+  if (!attached && (variant === 'ghost' || variant === 'default')) {
+    return `${base} px-0 hover:no-underline` // ensure no unwanted hover bg
+  }
+
+  // Outline/Separated/Attached: usually need padding styling inside the border
+  return `${base} px-4 hover:bg-accent`
+})
+
+const computedContentClass = computed(() => {
+  const { variant, attached } = props
+  const base = props.contentClass || ''
+
+  if (variant === 'solid') {
+    return `${base} px-4 pt-4`
+  }
+
+  if (!attached && (variant === 'ghost' || variant === 'default')) {
+    return `${base} px-0`
+  }
+  return `${base} px-4`
+})
+</script>
+
+<template>
+  <div :class="[containerClass, props.class, props.itemClass]">
+    <slot
+      name="trigger"
+      :item="item"
+      :open="isOpen"
+      :toggle="handleToggle"
+      :triggerClass="computedTriggerClass">
+      <AccordionTrigger
+        :open="isOpen"
+        :disabled="item.disabled || disabled"
+        :icon="item.icon"
+        :index="index"
+        :showIndex="showIndex"
+        :open-icon="openIcon"
+        :close-icon="closeIcon"
+        :icon-variant="iconVariant"
+        :active-icon-variant="activeIconVariant"
+        :class="computedTriggerClass"
+        @click="handleToggle">
+        <span>
+          {{ item.title }}
+        </span>
+
+        <span v-if="item.description" class="ml-2 text-sm text-muted-foreground font-normal">
+          {{ item.description }}
+        </span>
+      </AccordionTrigger>
+    </slot>
+
+    <AccordionContent v-show="isOpen" :class="computedContentClass">
+      <slot name="content" :item="item" :close="handleToggle">
+        <component
+          v-if="item.bodyComponent"
+          :is="item.bodyComponent"
+          :item="item"
+          :close="handleToggle" />
+        <div
+          v-else-if="item.content"
+          class="text-muted-foreground leading-relaxed"
+          v-html="item.content"></div>
+      </slot>
+    </AccordionContent>
+  </div>
+</template>