vlite3 0.1.0 → 0.1.2

package/types/form.type.d.ts

@@ -0,0 +1,45 @@
+export type InputType = 'text' | 'password' | 'email' | 'number' | 'date' | 'tel' | 'url' | 'search' | 'textarea';
+export type InputVariant = 'solid' | 'outline' | 'outline-b' | 'transparent';
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string;
+export type LabelPosition = 'top' | 'left' | 'right';
+export interface InputProps {
+    modelValue?: string | number;
+    type?: InputType;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    error?: string;
+    icon?: string;
+    iconRight?: string;
+    showClearButton?: boolean;
+    autofocus?: boolean;
+    class?: string;
+    inputClass?: string;
+    rows?: number;
+    lazy?: boolean;
+    variant?: InputVariant;
+    size?: InputSize;
+    rounded?: InputRounded;
+    labelPosition?: LabelPosition;
+    addonLeft?: string;
+    addonRight?: string;
+    addonLeftClass?: string;
+    addonRightClass?: string;
+    min?: number;
+    max?: number;
+}
+export type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type CheckboxRounded = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+export interface CheckboxProps {
+    modelValue?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    label?: string;
+    id?: string;
+    class?: string;
+    size?: CheckboxSize;
+    rounded?: CheckboxRounded;
+}

package/types/index.d.ts

@@ -0,0 +1,10 @@
+export * from './button';
+export * from './buttongroup.type';
+export * from './form.type';
+export * from './avatar.type';
+export * from './sidepanel.type';
+export * from './alert.type';
+export * from './timeline.type';
+export * from './navbar.type';
+export * from './styles.ts';
+export * from './config.type';

package/types/navbar.type.d.ts

@@ -0,0 +1,27 @@
+export type NavbarVariant = 'header' | 'sidebar';
+export type NavbarPosition = 'fixed' | 'sticky' | 'relative' | 'absolute';
+export type NavbarCenterPosition = 'center' | 'left' | 'right';
+export interface NavbarItemProps {
+    to?: string;
+    href?: string;
+    label?: string;
+    icon?: string;
+    active?: boolean;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent) => void;
+    class?: string;
+}
+export interface NavbarProps {
+    variant?: NavbarVariant;
+    position?: NavbarPosition;
+    centerPosition?: NavbarCenterPosition;
+    glass?: boolean;
+    border?: boolean;
+    floating?: boolean;
+    class?: string;
+    height?: string;
+    width?: string;
+    compact?: boolean;
+    logo?: string;
+    logoAlt?: string;
+}

package/types/sidepanel.type.d.ts

@@ -0,0 +1,13 @@
+export type SidePanelPosition = 'left' | 'right';
+export type SidePanelSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export interface SidePanelProps {
+    show: boolean;
+    title?: string;
+    description?: string;
+    position?: SidePanelPosition;
+    size?: SidePanelSize;
+    closeOutside?: boolean;
+    hideCloseButton?: boolean;
+    class?: string;
+    overlayClass?: string;
+}

package/types/styles.d.ts

@@ -0,0 +1,28 @@
+export type IVariants = 'danger' | 'primary' | 'default' | 'outline' | 'secondary' | 'transparent' | 'success' | 'warning';
+export type ISize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+export type IDropdownOption = {
+    label: string;
+    value?: any;
+    subtitle?: string;
+    description?: string;
+    icon?: string;
+    emoji?: string;
+    disabled?: Boolean;
+    iconClass?: string;
+    iconStyle?: any;
+    length?: number;
+    values?: any;
+    data?: any;
+    children?: IDropdownOption[];
+    key?: string;
+    position?: any;
+    offset?: [number, number];
+    confirmation?: boolean | {
+        title?: string;
+        description?: string;
+        confirmText?: string;
+        cancelText?: string;
+        variant?: 'danger' | 'primary' | 'warning' | 'success' | 'info';
+    };
+};
+export type IDropdownOptions = IDropdownOption[];

package/types/timeline.type.d.ts

@@ -0,0 +1,9 @@
+export interface TimelineStep {
+    id: string | number;
+    title: string;
+    description?: string;
+    icon?: string;
+    status?: 'completed' | 'current' | 'upcoming';
+}
+export type TimelineDirection = 'horizontal' | 'vertical';
+export type TimelineTextPosition = 'bottom' | 'right';

package/{src/utils/functions.ts → utils/functions.d.ts}

@@ -6,12 +6,4 @@
  * @param delay The delay in milliseconds
  * @returns A new debounced function
  */
-export const debounce = (fn: Function, delay: number) => {
-  let timeoutId: any
-  return (...args: any[]) => {
-    clearTimeout(timeoutId)
-    timeoutId = setTimeout(() => {
-      fn(...args)
-    }, delay)
-  }
-}
+export declare const debounce: (fn: Function, delay: number) => (...args: any[]) => void;

package/utils/functions.js

@@ -0,0 +1,11 @@
+const r = (t, o) => {
+  let e;
+  return (...u) => {
+    clearTimeout(e), e = setTimeout(() => {
+      t(...u);
+    }, o);
+  };
+};
+export {
+  r as debounce
+};

package/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './object';
+export * from './functions';

package/utils/object.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Deep merges two objects.
+ * Sources overwrite target properties.
+ * Arrays are replaced, not concatenated (usually desired for state updates).
+ */
+export declare function deepMerge(target: any, source: any): any;

package/utils/object.js

@@ -0,0 +1,14 @@
+function r(l, e) {
+  if (!e || typeof e != "object")
+    return e;
+  if (!l || typeof l != "object")
+    return { ...e };
+  const f = { ...l };
+  return Object.keys(e).forEach((n) => {
+    const o = f[n], t = e[n];
+    Array.isArray(t) ? f[n] = [...t] : typeof t == "object" && t !== null && o && typeof o == "object" && o !== null ? f[n] = r(o, t) : f[n] = t;
+  }), f;
+}
+export {
+  r as deepMerge
+};

package/.vscode/extensions.json

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

package/LICENSE

@@ -1,21 +0,0 @@
-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/index.html

@@ -1,16 +0,0 @@
-<!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/scripts/bundle-css.js

@@ -1,45 +0,0 @@
-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

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

package/src/components/Accordion/Accordion.vue

@@ -1,139 +0,0 @@
-<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

@@ -1,63 +0,0 @@
-<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

@@ -1,163 +0,0 @@
-<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>