vlite3 0.1.0 → 0.1.2

package/src/components/Accordion/AccordionTrigger.vue

@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import Icon from '../Icon.vue'
-
-interface Props {
-  class?: string
-  icon?: string
-  open?: boolean
-  disabled?: boolean
-  index?: number
-  showIndex?: boolean
-
-  // Custom icons from parent/root
-  openIcon?: string
-  closeIcon?: string
-  // Icon Style
-  iconVariant?: 'simple' | 'solid' | 'outline' | 'primary' | 'ghost'
-  activeIconVariant?: 'simple' | 'solid' | 'outline' | 'primary' | 'ghost'
-  chevron?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  class: '',
-  chevron: true,
-  showIndex: false,
-  iconVariant: 'simple',
-})
-
-const emit = defineEmits<{
-  (e: 'click', event: MouseEvent): void
-}>()
-
-const handleClick = (e: MouseEvent) => {
-  if (props.disabled) return
-  emit('click', e)
-}
-
-// Icon Logic
-const currentIcon = computed(() => {
-  // If specific open/close icons are provided
-  if (props.open && props.openIcon) return props.openIcon
-  if (!props.open && props.closeIcon) return props.closeIcon
-
-  // Default chevron behavior
-  return 'lucide:chevron-down'
-})
-
-const iconRotationClass = computed(() => {
-  // Only rotate if we are NOT using distinct icons (i.e. using chevron for both or same icon)
-  if (props.openIcon && props.closeIcon) return ''
-  return props.open ? 'rotate-180' : ''
-})
-
-const currentIconVariant = computed(() => {
-  if (props.open && props.activeIconVariant) return props.activeIconVariant
-  return props.iconVariant
-})
-
-const iconContainerClass = computed(() => {
-  const base = 'flex items-center justify-center shrink-0 transition-all duration-300'
-  const size = 'h-8 w-8 rounded-full' // Standard click target/visual size for updated designs
-
-  const variants: Record<string, string> = {
-    simple: 'text-muted-foreground bg-transparent',
-    solid: 'text-foreground bg-muted',
-    outline: 'text-foreground border bg-transparent',
-    primary: 'text-primary-dark bg-primary-light',
-    ghost: 'text-muted-foreground hover:bg-accent bg-transparent',
-  }
-
-  const variantClass = variants[currentIconVariant.value] || variants['simple']
-
-  // If simple, we might not want the fixed size container unless it's intended to be a button?
-  // User requested "customizable it's variant like transparent, solid...".
-  // Solid/Outline implies a shape.
-  if (currentIconVariant.value === 'simple')
-    return `text-muted-foreground group-hover:text-foreground ${iconRotationClass.value}`
-
-  return `${base} ${size} ${variantClass} ${iconRotationClass.value}`
-})
-</script>
-
-<template>
-  <button
-    type="button"
-    class="group flex flex-1 w-full items-center justify-between py-3 text-left font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
-    :class="[props.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer', props.class]"
-    :data-state="props.open ? 'open' : 'closed'"
-    :disabled="props.disabled"
-    @click="handleClick">
-    <div class="flex items-center gap-3">
-      <!-- Number Badge -->
-      <div
-        v-if="showIndex && index !== undefined"
-        class="flex items-center justify-center h-7 w-7 rounded-full bg-primary-light text-primary text-xs font-bold shrink-0">
-        {{ index }}
-      </div>
-
-      <!-- Item Icon (Leader) -->
-      <Icon
-        v-if="icon"
-        :icon="icon"
-        class="h-5 w-5 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
-
-      <!-- Content Slot -->
-      <div class="flex flex-col">
-        <slot />
-      </div>
-    </div>
-
-    <!-- Expand/Collapse Icon -->
-    <slot name="icon">
-      <div v-if="chevron || openIcon || closeIcon" :class="iconContainerClass">
-        <Icon
-          :icon="currentIcon"
-          class="h-4 w-4 shrink-0 transition-transform duration-200"
-          :class="{ 'rotate-0': currentIconVariant !== 'simple' }" />
-        <!-- Note: Rotation handled in container for shapes, or on icon for simple. 
-                         If container rotates, the shadow/border rotates too which is fine for circle, 
-                         but checking logic above: iconContainerClass includes iconRotationClass.
-                    -->
-      </div>
-    </slot>
-  </button>
-</template>

package/src/components/Accordion/index.ts

@@ -1,5 +0,0 @@
-export { default as Accordion } from './Accordion.vue'
-export { default as AccordionItem } from './AccordionItem.vue'
-export { default as AccordionTrigger } from './AccordionTrigger.vue'
-export { default as AccordionContent } from './AccordionContent.vue'
-export * from './types'

package/src/components/Accordion/types.ts

@@ -1,41 +0,0 @@
-export interface AccordionItemSchema {
-  id: string
-  title: string
-  description?: string
-  content?: string // HTML or text
-  bodyComponent?: any // Component to render in body
-  disabled?: boolean
-  icon?: string
-  // Allow any arbitrary data for slots
-  [key: string]: any
-}
-
-export type AccordionVariant = 'default' | 'solid' | 'outline' | 'ghost' | 'separated' // Items have gaps between them
-
-export interface AccordionProps {
-  items?: AccordionItemSchema[]
-  modelValue?: string | string[]
-  allowMultiple?: boolean
-  defaultValue?: string | string[]
-  disabled?: boolean
-  variant?: AccordionVariant
-
-  // Layout
-  attached?: boolean
-
-  // Icon Customization
-  openIcon?: string
-  closeIcon?: string
-  iconPosition?: 'left' | 'right'
-  iconVariant?: 'simple' | 'solid' | 'outline' | 'primary' | 'ghost'
-  activeIconVariant?: 'simple' | 'solid' | 'outline' | 'primary' | 'ghost'
-
-  // Numbering
-  showIndex?: boolean
-
-  // Classes for deep customization
-  class?: string
-  itemClass?: string
-  triggerClass?: string
-  contentClass?: string
-}

package/src/components/Alert.vue

@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import Icon from './Icon.vue'
-import type { AlertVariant } from '@/types'
-import Button from './Button.vue'
-
-interface Props {
-  title?: string
-  description?: string
-  icon?: string
-  variant?: AlertVariant
-  closable?: boolean
-  role?: 'alert' | 'status' | 'none'
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'primary',
-  closable: false,
-  class: '',
-})
-
-const emit = defineEmits<{
-  (e: 'close'): void
-}>()
-
-const isVisible = ref(true)
-
-const handleClose = () => {
-  isVisible.value = false
-  emit('close')
-}
-
-const variantClasses = computed(() => {
-  const variants: Record<AlertVariant, string> = {
-    primary: 'bg-primary-light text-primary border-primary/15',
-    success: 'bg-success-light text-success-dark border-success/25',
-    warning: 'bg-warning-light text-warning-dark border-warning/20',
-    danger: 'bg-danger-light text-danger-dark border-danger/15',
-  }
-  return variants[props.variant]
-})
-
-const iconClasses = computed(() => {
-  const variants: Record<AlertVariant, string> = {
-    primary: 'text-primary!',
-    success: 'text-success-dark!',
-    warning: 'text-warning-dark!',
-    danger: 'text-danger-dark!',
-  }
-  return variants[props.variant]
-})
-
-const isTitleOnly = computed(() => !props.description && !useSlots().default)
-
-// Helper to check if default slot is present (requires import useSlots)
-import { useSlots } from 'vue'
-
-const containerClasses = computed(() => {
-  return [
-    'relative w-full rounded-lg border px-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:text-foreground',
-    isTitleOnly.value ? 'py-3' : 'pt-4 pb-2',
-    // Icon Position: Center vertically if title only, otherwise top-4
-    isTitleOnly.value
-      ? '[&>svg]:top-1/2 [&>svg]:-translate-y-1/2'
-      : '[&>svg]:top-4 top-4 [&>svg+div]:translate-y-[-3px]',
-    variantClasses.value,
-    props.class,
-  ].join(' ')
-})
-
-const titleClasses = computed(() => {
-  return [
-    'font-medium leading-none tracking-tight text-inherit!',
-    isTitleOnly.value ? '' : 'mb-1',
-  ].join(' ')
-})
-
-const computedRole = computed(() => {
-  if (props.role) return props.role
-  return ['danger', 'warning'].includes(props.variant) ? 'alert' : 'status'
-})
-</script>
-
-<template>
-  <div v-if="isVisible" :class="containerClasses" :role="computedRole">
-    <slot name="icon">
-      <Icon v-if="icon" :icon="icon" class="h-4 w-4" :class="iconClasses" />
-    </slot>
-
-    <div :class="{ 'pl-7': icon || $slots.icon, 'pr-6': closable }">
-      <h5 :class="titleClasses" v-if="title">
-        {{ title }}
-      </h5>
-      <div v-if="description || $slots.default" class="text-sm opacity-90 [&_p]:leading-relaxed">
-        <slot>
-          {{ description }}
-        </slot>
-      </div>
-    </div>
-
-    <button
-      v-if="closable"
-      type="button"
-      @click="handleClose"
-      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
-      :class="[isTitleOnly ? 'top-1/2 -translate-y-1/2' : 'top-4']">
-      <Icon icon="lucide:x" class="h-4 w-4" />
-      <span class="sr-only">Close</span>
-    </button>
-  </div>
-</template>

package/src/components/Avatar.vue

@@ -1,110 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import Icon from './Icon.vue'
-import type { AvatarSize, AvatarRounded } from '@/types'
-
-interface Props {
-  src?: string
-  alt?: string
-  fallback?: string
-  size?: AvatarSize
-  rounded?: AvatarRounded
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  src: '',
-  alt: 'Avatar',
-  size: 'md',
-  rounded: 'full',
-  class: '',
-})
-
-const hasError = ref(false)
-const isLoaded = ref(false)
-
-// Reset state when src changes
-watch(
-  () => props.src,
-  () => {
-    hasError.value = false
-    isLoaded.value = false
-  }
-)
-
-const onError = () => {
-  hasError.value = true
-  isLoaded.value = false
-}
-
-const onLoad = () => {
-  isLoaded.value = true
-  hasError.value = false
-}
-
-const showImage = computed(() => {
-  return props.src && !hasError.value
-})
-
-const initials = computed(() => {
-  if (props.fallback) return props.fallback
-
-  if (!props.alt) return ''
-
-  const words = props.alt.trim().split(/\s+/)
-  if (words.length === 1) {
-    return words[0].slice(0, 2).toUpperCase()
-  }
-  return (words[0][0] + words[words.length - 1][0]).toUpperCase()
-})
-
-const sizeClasses: Record<AvatarSize, string> = {
-  xs: 'h-6 w-6 text-[10px]',
-  sm: 'h-8 w-8 text-xs',
-  md: 'h-10 w-10 text-sm',
-  lg: 'h-14 w-14 text-base',
-  xl: 'h-20 w-20 text-lg',
-  '2xl': 'h-22 w-22 text-xl',
-}
-
-const roundedClasses: Record<AvatarRounded, string> = {
-  none: 'rounded-none',
-  sm: 'rounded-sm',
-  md: 'rounded-md',
-  lg: 'rounded-lg',
-  xl: 'rounded-xl',
-  '2xl': 'rounded-2xl',
-  full: 'rounded-full',
-}
-
-const containerClass = computed(() => {
-  return [
-    'relative flex shrink-0 overflow-hidden bg-muted border border-border/50',
-    sizeClasses[props.size],
-    roundedClasses[props.rounded],
-    props.class,
-  ].join(' ')
-})
-
-const fallbackClass = computed(() => {
-  return 'flex h-full w-full items-center justify-center bg-muted text-muted-foreground font-medium'
-})
-</script>
-
-<template>
-  <div :class="containerClass">
-    <img
-      v-if="showImage"
-      :src="src"
-      :alt="alt"
-      class="aspect-square h-full w-full object-cover"
-      @error="onError"
-      @load="onLoad" />
-    <div v-else :class="fallbackClass">
-      <slot name="fallback">
-        <span v-if="initials">{{ initials }}</span>
-        <Icon v-else icon="lucide:user" class="h-1/2 w-1/2" />
-      </slot>
-    </div>
-  </div>
-</template>

package/src/components/AvatarUploader/AvatarUploader.vue

@@ -1,129 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import Icon from '@/components/Icon.vue'
-import FilePicker from '@/components/FilePicker/FilePicker.vue'
-import type { FilePickerValue } from '@/components/FilePicker/FilePicker.vue'
-import Avatar from '@/components/Avatar.vue'
-import type { AvatarSize, AvatarRounded } from '@/types'
-
-defineOptions({
-  name: 'AvatarUploader',
-})
-
-export interface Props {
-  modelValue?: any
-  size?: AvatarSize
-  rounded?: AvatarRounded
-  editable?: boolean
-  loading?: boolean
-  disabled?: boolean
-  fallback?: string
-  alt?: string
-  maxSize?: number
-  className?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: null,
-  size: 'xl',
-  rounded: 'full',
-  editable: true,
-  loading: false,
-  disabled: false,
-  alt: 'Avatar',
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string | null): void
-  (e: 'change', value: FilePickerValue | null): void
-  (e: 'error', error: string): void
-}>()
-
-const previewUrl = ref<string | null>(null)
-
-const currentImage = computed(() => {
-  return previewUrl.value || props.modelValue
-})
-
-const handleFileChange = (fileVal: FilePickerValue | FilePickerValue[] | null) => {
-  if (!fileVal || Array.isArray(fileVal)) {
-    if (Array.isArray(fileVal) && fileVal.length === 0) {
-      handleRemove()
-    }
-    return
-  }
-
-  if (fileVal.base64) {
-    previewUrl.value = fileVal.base64
-    emit('update:modelValue', fileVal.base64)
-  }
-
-  emit('change', fileVal)
-}
-
-const handleError = (err: string) => {
-  emit('error', err)
-}
-
-const handleRemove = () => {
-  previewUrl.value = null
-  emit('update:modelValue', null)
-  emit('change', null)
-}
-</script>
-
-<template>
-  <div class="inline-block">
-    <div
-      class="relative inline-block group"
-      :class="rounded === 'full' ? 'rounded-full' : 'rounded-md'">
-      <Avatar
-        :src="currentImage || undefined"
-        :fallback="fallback"
-        :alt="alt"
-        :size="size"
-        :rounded="rounded"
-        :class="className" />
-
-      <FilePicker
-        :disabled="!editable || disabled || loading"
-        :return-format="'base64'"
-        :file-types="['image/jpeg', 'image/png', 'image/webp', 'image/gif']"
-        :max-size="maxSize"
-        class="absolute inset-0"
-        @change="(v: any) => handleFileChange(v)"
-        @error="handleError">
-        <template #trigger="{ trigger, isLoading }">
-          <button
-            type="button"
-            class="absolute inset-0 cursor-pointer"
-            :class="{ 'cursor-default': !editable || disabled }"
-            @click="editable && !disabled ? trigger() : null">
-            <div
-              v-if="loading || isLoading"
-              class="absolute inset-0 flex items-center justify-center bg-black/40 text-white"
-              :class="rounded === 'full' ? 'rounded-full' : 'rounded-md'">
-              <Icon icon="lucide:loader-2" class="animate-spin w-1/3 h-1/3" />
-            </div>
-
-            <div
-              v-else-if="editable && !disabled"
-              class="absolute inset-0 flex items-center justify-center bg-black/40 text-white opacity-0 group-hover:opacity-100 transition-opacity"
-              :class="rounded === 'full' ? 'rounded-full' : 'rounded-md'">
-              <Icon icon="lucide:camera" class="w-1/3 h-1/3" />
-            </div>
-          </button>
-        </template>
-      </FilePicker>
-
-      <button
-        v-if="currentImage && editable && !disabled && !loading"
-        type="button"
-        class="absolute -top-1 -right-1 z-10 p-1 bg-background border border-border rounded-full text-muted-foreground shadow-sm hover:text-destructive hover:border-destructive transition-all opacity-0 group-hover:opacity-100 scale-75 group-hover:scale-100"
-        @click.stop="handleRemove"
-        title="Remove image">
-        <Icon icon="lucide:x" class="w-3 h-3" />
-      </button>
-    </div>
-  </div>
-</template>

package/src/components/Badge.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-export type BadgeVariant =
-  | 'default'
-  | 'secondary'
-  | 'danger'
-  | 'outline'
-  | 'warning'
-  | 'info'
-  | 'success'
-
-interface Props {
-  variant?: BadgeVariant
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'default',
-  class: '',
-})
-
-const classes = computed(() => {
-  const baseClasses =
-    'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'
-
-  const variants: Record<BadgeVariant, string> = {
-    default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-    secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-    danger: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-    warning: 'border-transparent bg-warning text-warning-fg hover:bg-warning/80',
-    info: 'border-transparent bg-info text-info-fg hover:bg-info/80',
-    success: 'border-transparent bg-success text-success-fg hover:bg-success/80',
-    outline: 'text-foreground border-border',
-  }
-
-  return [baseClasses, variants[props.variant], props.class].join(' ')
-})
-</script>
-
-<template>
-  <div :class="classes">
-    <slot />
-  </div>
-</template>

package/src/components/Button.vue

@@ -1,122 +0,0 @@
-<script setup lang="ts">
-import { computed, useSlots } from 'vue'
-import Icon from './Icon.vue'
-import { vRipple } from '../directives/vRipple'
-import type { ButtonVariant, ButtonSize, ButtonRounded, ButtonProps } from '@/types'
-
-const props = withDefaults(defineProps<ButtonProps>(), {
-  variant: 'primary',
-  size: 'md',
-  type: 'button',
-  rounded: 'md',
-  disabled: false,
-  loading: false,
-  class: '',
-})
-
-const slots = useSlots()
-const isOnlyIcon = computed(() => props.icon && !props.text && !slots.default)
-
-const classes = computed(() => {
-  const baseClasses =
-    'inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-95 cursor-pointer'
-
-  const variants: Record<ButtonVariant, string> = {
-    primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
-    'primary-light': 'bg-primary-light text-primary-fg-light hover:bg-primary/20',
-    secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-    danger: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-    'danger-light': 'bg-destructive/10 text-destructive hover:bg-destructive/20',
-    warning: 'bg-warning text-warning-fg hover:bg-warning/80',
-    'warning-light': 'bg-warning-light text-warning-fg-light hover:bg-warning/20',
-    info: 'bg-info text-info-fg hover:bg-info/80',
-    'info-light': 'bg-info-light text-info-fg-light hover:bg-info/20',
-    success: 'bg-success text-success-fg hover:bg-success/80',
-    'success-light': 'bg-success-light text-success-fg-light hover:bg-success/20',
-
-    outline:
-      'border border-input bg-background hover:bg-accent hover:text-accent-foreground text-foreground',
-    'outline-primary': 'border border-primary text-primary hover:bg-primary/10',
-    'outline-danger': 'border border-destructive text-destructive hover:bg-destructive/10',
-    'outline-warning': 'border border-warning text-warning hover:bg-warning/10',
-    'outline-info': 'border border-info text-info hover:bg-info/10',
-    'outline-success': 'border border-success text-success hover:bg-success/10',
-
-    ghost: 'hover:bg-accent hover:text-accent-foreground text-foreground',
-    link: 'text-primary underline-offset-4 hover:underline',
-  }
-
-  const sizes: Record<ButtonSize, string> = {
-    xs: 'h-6.5 px-2',
-    sm: 'h-8 px-3',
-    md: 'h-9 px-4 py-2',
-    lg: 'h-10 px-8',
-    xl: 'h-12 px-10',
-  }
-  const iconSizes: Record<ButtonSize, string> = {
-    xs: 'h-6.5 w-6.5 min-h-6.5 min-w-6.5',
-    sm: 'h-8 w-8 min-h-9 min-w-9',
-    md: 'h-9 w-9 min-h-9 min-w-9',
-    lg: 'h-10 w-10 min-h-11 min-w-11',
-    xl: 'h-12 w-12 min-h-12 min-w-12',
-  }
-
-  const roundedVariants: Record<ButtonRounded, string> = {
-    none: 'rounded-none',
-    sm: 'rounded-sm',
-    md: 'rounded',
-    lg: 'rounded-lg',
-    xl: 'rounded-xl',
-    '2xl': 'rounded-2xl',
-    full: 'rounded-full',
-  }
-
-  return [
-    baseClasses,
-    variants[props.variant],
-    roundedVariants[props.rounded],
-    isOnlyIcon.value ? iconSizes[props.size] : sizes[props.size],
-    props.class,
-  ].join(' ')
-})
-
-const iconClasses = computed(() => {
-  const sizes: Record<ButtonSize, string> = {
-    xs: 'w-3 h-3',
-    sm: 'w-4 h-4',
-    md: 'w-4 h-4',
-    lg: 'w-4 h-4',
-    xl: 'w-4 h-4',
-  }
-
-  return sizes[props.size]
-})
-</script>
-
-<template>
-  <button v-ripple :type="type" :class="classes" :disabled="disabled || loading">
-    <Icon
-      v-if="loading"
-      icon="lucide:loader-2"
-      class="mr-2 animate-spin"
-      :class="{ 'mr-0': isOnlyIcon, [iconClasses]: true }" />
-
-    <!-- Icon logic: center if only icon -->
-    <Icon
-      v-else-if="icon"
-      :icon="icon"
-      :class="{
-        'mr-2': $slots.default || text,
-        'mx-auto': isOnlyIcon,
-        [iconClasses]: true,
-      }" />
-
-    <slot>{{ text }}</slot>
-
-    <Icon
-      v-if="iconRight && !loading"
-      :icon="iconRight"
-      :class="iconClasses"
-      class="ml-2 h-4 w-4" />
-  </button>
-</template>