vlite3 0.1.0 → 0.1.2

package/src/components/SidebarMenu/types.ts

@@ -1,54 +0,0 @@
-export interface SidebarMenuItemSchema {
-  /** Unique identifier. If not provided, will fallback to label or to-path */
-  id?: string
-  /** Display text */
-  label: string
-  /** Iconify icon string (e.g., 'lucide:home') */
-  icon?: string
-  /** Router link destination (string path or object) */
-  to?: string | object
-  /** External link URL */
-  href?: string
-  /** Function to call on click */
-  action?: (item: SidebarMenuItemSchema) => void
-  /** Recursive children */
-  children?: SidebarMenuItemSchema[]
-  /** Disabled state */
-  disabled?: boolean
-  /** Badge content (count, status, etc.) */
-  badge?: string | number
-  /** Badge variant/color class (optional) */
-  badgeClass?: string
-  /** Initially expanded state (for folders) */
-  expanded?: boolean
-  /** Rendering mode for children: 'tree' (inline) or 'popover' (dropdown) */
-  renderMode?: 'tree' | 'popover'
-  /** Custom class for this item */
-  class?: string
-  /** Data attributes or other props */
-  [key: string]: any
-}
-
-export interface SidebarMenuProps {
-  items: SidebarMenuItemSchema[]
-  /** Whether multiple groups can be expanded at once. Default: true */
-  allowMultiple?: boolean
-  /** Initial expanded item IDs */
-  defaultExpanded?: string[]
-  /** Base indentation in pixels or styling units. Default: handled via padding utility. */
-  indentSize?: number
-  /** Style variant */
-  variant?: 'default' | 'ghost'
-  /** Default rendering mode for groups */
-  renderMode?: 'tree' | 'popover'
-}
-
-export interface SidebarMenuContext {
-  activeItem: string | null
-  expandedItems: string[]
-  toggleExpand: (id: string) => void
-  setActive: (id: string | null) => void
-  indentSize: number
-  variant: 'default' | 'ghost'
-  renderMode: 'tree' | 'popover'
-}

package/src/components/Slider.vue

@@ -1,181 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import Icon from './Icon.vue'
-
-const props = withDefaults(
-  defineProps<{
-    min?: number
-    max?: number
-    step?: number
-    label?: string
-    icon?: string
-    disabled?: boolean
-    showValue?: boolean
-    modelValue?: number
-    labelClass?: string
-    centerOrigin?: boolean
-  }>(),
-  {
-    min: 0,
-    max: 100,
-    step: 1,
-    modelValue: 0,
-    showValue: true,
-    centerOrigin: undefined,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [value: number]
-  change: [value: number]
-  iconClick: []
-}>()
-
-const isDragging = ref(false)
-const isHovered = ref(false)
-const innerValue = ref(props.modelValue)
-
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    innerValue.value = newVal
-  }
-)
-
-const isBipolar = computed(() => {
-  if (props.centerOrigin !== undefined) return props.centerOrigin
-  return props.min < 0 && props.max > 0
-})
-
-const range = computed(() => props.max - props.min)
-
-const percentage = computed(() => {
-  return ((innerValue.value - props.min) / range.value) * 100
-})
-
-const zeroPercentage = computed(() => {
-  return ((0 - props.min) / range.value) * 100
-})
-
-const getContainedPos = (p: number) => {
-  return `calc(${p}% + (8px - ${p * 0.16}px))`
-}
-
-const trackStyle = computed(() => {
-  if (isBipolar.value) {
-    const start = Math.min(percentage.value, zeroPercentage.value)
-    const end = Math.max(percentage.value, zeroPercentage.value)
-
-    const startPos = getContainedPos(start)
-    const endPos = getContainedPos(end)
-
-    return {
-      left: startPos,
-      width: `calc(${endPos} - ${startPos})`,
-    }
-  } else {
-    return {
-      left: '0%',
-      width: getContainedPos(percentage.value),
-    }
-  }
-})
-
-const thumbStyle = computed(() => {
-  return {
-    left: getContainedPos(percentage.value),
-  }
-})
-
-const handleInput = () => {
-  emit('update:modelValue', innerValue.value)
-}
-
-const handleChange = () => {
-  emit('change', innerValue.value)
-  isDragging.value = false
-}
-
-const isModified = computed(() => Math.abs(props.modelValue) > 0.001)
-
-const handleReset = () => {
-  if (props.disabled) return
-  const resetValue = isBipolar.value ? 0 : props.min
-  innerValue.value = resetValue
-  emit('update:modelValue', resetValue)
-  emit('change', resetValue)
-}
-
-const displayValue = computed(() => {
-  const decimals = props.step.toString().split('.')[1]?.length || 0
-  return innerValue.value.toFixed(decimals)
-})
-</script>
-
-<template>
-  <div
-    class="slider-wrapper flex items-center gap-3 w-full select-none touch-none"
-    :class="{ 'opacity-50 pointer-events-none': disabled }"
-    @mouseenter="isHovered = true"
-    @mouseleave="isHovered = false">
-    <div
-      v-if="label || icon"
-      class="flex items-center gap-2 min-w-fit cursor-pointer transition-colors"
-      :class="[{ 'text-primary': isDragging || isHovered }, labelClass || 'text-muted-foreground']"
-      @click="emit('iconClick')"
-      :title="`Double-click to reset`">
-      <Icon v-if="icon" :icon="icon" class="h-4 w-4" />
-      <label v-if="label" class="text-sm font-medium whitespace-nowrap cursor-pointer">
-        {{ label }}
-      </label>
-    </div>
-
-    <div class="relative flex-1 h-6 flex items-center group">
-      <!-- Track Background -->
-      <div class="absolute w-full h-1.5 bg-secondary rounded-full overflow-hidden"></div>
-
-      <!-- Zero Tick for Bipolar -->
-      <div
-        v-if="isBipolar"
-        class="absolute top-1/2 h-1.5 w-0.5 bg-muted-foreground/30 rounded transform -translate-y-1/2 z-0"
-        :style="{ left: getContainedPos(zeroPercentage) }"></div>
-
-      <!-- Active Track -->
-      <div
-        class="absolute h-1.5 bg-primary rounded-full transition-all duration-75 ease-out will-change-transform"
-        :class="{ 'bg-muted-foreground': disabled }"
-        :style="trackStyle"></div>
-
-      <!-- Thumb -->
-      <div
-        class="absolute top-1/2 w-4 h-4 bg-background border border-border shadow-sm rounded-full transform -translate-y-1/2 -translate-x-1/2 pointer-events-none transition-transform duration-100 ease-out z-10"
-        :class="{
-          'border-primary shadow-md scale-110': isDragging,
-          'border-primary': isModified,
-        }"
-        :style="thumbStyle"></div>
-
-      <input
-        type="range"
-        v-model.number="innerValue"
-        :min="min"
-        :max="max"
-        :step="step"
-        :disabled="disabled"
-        @input="handleInput"
-        @change="handleChange"
-        @mousedown="isDragging = true"
-        @touchstart="isDragging = true"
-        @mouseup="isDragging = false"
-        @touchend="isDragging = false"
-        class="slider-input absolute inset-0 w-full h-full opacity-0 cursor-pointer z-20 m-0 p-0" />
-    </div>
-
-    <span
-      @dblclick="handleReset"
-      v-if="showValue"
-      class="font-mono tabular-nums text-muted-foreground text-right min-w-[1.5rem] text-sm">
-      {{ displayValue }}
-    </span>
-  </div>
-</template>

package/src/components/Switch.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-  modelValue?: boolean
-  disabled?: boolean
-  label?: string
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: false,
-  disabled: false,
-  class: '',
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-}>()
-
-const toggle = () => {
-  if (props.disabled) return
-  emit('update:modelValue', !props.modelValue)
-}
-</script>
-
-<template>
-  <div class="flex items-center gap-2">
-    <button
-      type="button"
-      role="switch"
-      :aria-checked="modelValue"
-      :aria-label="label || 'Toggle'"
-      :disabled="disabled"
-      class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-      :class="[modelValue ? 'bg-primary' : 'bg-input', props.class]"
-      @click="toggle">
-      <span
-        aria-hidden="true"
-        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-background shadow-lg ring-0 transition duration-200 ease-in-out"
-        :class="modelValue ? 'translate-x-5' : 'translate-x-0'" />
-    </button>
-    <label
-      v-if="label"
-      :class="disabled ? 'opacity-50' : ''"
-      class="text-sm font-medium text-foreground cursor-pointer"
-      @click="toggle">
-      {{ label }}
-    </label>
-  </div>
-</template>

package/src/components/Tabes/Tabes.vue

@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { TabesOption, TabesSize, TabesVariant } from './types'
-import Icon from '../Icon.vue'
-
-interface Props {
-  options: TabesOption[]
-  modelValue: string | number
-  size?: TabesSize
-  variant?: TabesVariant
-  block?: boolean
-  textClass?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 'md',
-  variant: 'surface',
-  block: false,
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string | number): void
-  (e: 'change', value: string | number): void
-}>()
-
-const handleSelect = (option: TabesOption) => {
-  if (option.disabled) return
-  emit('update:modelValue', option.value)
-  emit('change', option.value)
-}
-
-const containerClasses = computed(() => {
-  const base = 'inline-flex rounded-lg relative isolate transition-all duration-200'
-
-  const variantStyles: Record<TabesVariant, string> = {
-    surface: 'bg-secondary p-1',
-    primary: 'bg-secondary p-1',
-    secondary: 'bg-secondary p-1', // Default secondary container
-    danger: 'bg-danger/10 p-1',
-    success: 'bg-success/10 p-1',
-    outline: 'bg-transparent border border-border p-1',
-    line: 'bg-transparent gap-6 rounded-none p-0 border-b border-border w-full', // Tabs style
-  }
-
-  return [base, variantStyles[props.variant], props.block ? 'flex w-full' : '']
-})
-
-const sizeClasses = {
-  sm: 'text-xs px-2.5 py-1',
-  md: 'text-xs px-3 py-1',
-  lg: 'text-base px-4 py-1.5',
-}
-
-const itemBaseClasses = computed(() => {
-  // Line variant needs different base styles (no rounded corners usually, or bottom rounded? No, usually text)
-  const isLine = props.variant === 'line'
-  const base = isLine
-    ? 'relative z-10 flex items-center justify-center gap-2 font-medium transition-all duration-200 ease-out cursor-pointer select-none outline-none focus-visible:ring-2 focus-visible:ring-primary/50 -mb-[1px] border-b-2 border-transparent hover:text-foreground'
-    : 'relative z-10 flex-1 flex items-center justify-center gap-2 font-medium transition-all duration-200 ease-out cursor-pointer select-none rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary/50'
-
-  return [base]
-})
-
-const getItemClasses = (option: TabesOption) => {
-  const isActive = option.value === props.modelValue
-  const isLine = props.variant === 'line'
-
-  let activeStateClasses = ''
-  if (!isActive) {
-    activeStateClasses = isLine
-      ? 'text-muted-foreground'
-      : 'text-muted-foreground hover:text-foreground/80'
-  }
-
-  const disabledClasses = option.disabled ? 'opacity-50 cursor-not-allowed' : ''
-
-  return [itemBaseClasses.value, activeStateClasses, disabledClasses].join(' ')
-}
-
-const getActiveStyle = (option: TabesOption) => {
-  if (option.value !== props.modelValue) return ''
-
-  const variantActiveStyles: Record<TabesVariant, string> = {
-    surface: 'bg-background text-foreground shadow-sm',
-    primary: 'bg-primary text-primary-foreground shadow-sm',
-    secondary: 'bg-secondary-foreground text-secondary shadow-sm', // Inverted for contrast
-    danger: 'bg-danger text-danger-fg shadow-sm',
-    success: 'bg-success text-success-fg shadow-sm',
-    outline: 'bg-accent/50 text-accent-foreground ring-1 ring-border shadow-sm',
-    line: 'text-primary border-primary', // Border-b-2 handled by base class + border color here
-  }
-
-  return variantActiveStyles[props.variant]
-}
-</script>
-
-<template>
-  <div :class="containerClasses" role="tablist">
-    <button
-      v-for="opt in options"
-      :key="opt.value"
-      role="tab"
-      :aria-selected="modelValue === opt.value"
-      :disabled="opt.disabled"
-      :class="[getItemClasses(opt), getActiveStyle(opt), sizeClasses[props.size]]"
-      @click="handleSelect(opt)"
-      type="button">
-      <Icon v-if="opt.icon" :icon="opt.icon" :class="size === 'sm' ? 'w-3.5 h-3.5' : 'w-4 h-4'" />
-      <span :class="textClass">{{ opt.label }}</span>
-    </button>
-  </div>
-</template>

package/src/components/Tabes/index.ts

@@ -1,2 +0,0 @@
-export { default as Tabes } from './Tabes.vue'
-export * from './types'

package/src/components/Tabes/types.ts

@@ -1,17 +0,0 @@
-export interface TabesOption {
-  label: string
-  value: string | number
-  icon?: string
-  disabled?: boolean
-}
-
-export type TabesSize = 'sm' | 'md' | 'lg'
-
-export type TabesVariant =
-  | 'surface'
-  | 'primary'
-  | 'secondary'
-  | 'danger'
-  | 'success'
-  | 'outline'
-  | 'line'

package/src/components/Textarea.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-  modelValue?: string
-  placeholder?: string
-  disabled?: boolean
-  rows?: number
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  disabled: false,
-  rows: 3,
-  class: '',
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-  (e: 'focus', event: FocusEvent): void
-  (e: 'blur', event: FocusEvent): void
-}>()
-
-const classes = computed(() => {
-  return [
-    'flex min-h-[80px] w-full rounded-md border border-input px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary disabled:cursor-not-allowed disabled:opacity-50 bg-background text-foreground',
-    props.class,
-  ].join(' ')
-})
-
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLTextAreaElement
-  emit('update:modelValue', target.value)
-}
-</script>
-
-<template>
-  <textarea
-    :value="modelValue"
-    :rows="rows"
-    :disabled="disabled"
-    :placeholder="placeholder"
-    :class="classes"
-    @input="handleInput"
-    @focus="emit('focus', $event)"
-    @blur="emit('blur', $event)" />
-</template>

package/src/components/ThemeToggle.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { useTheme } from '../composables/useTheme'
-import Button from './Button.vue'
-
-const { theme, toggleTheme } = useTheme()
-</script>
-
-<template>
-  <Button
-    :icon="theme === 'light' ? 'lucide:sun' : 'lucide:moon'"
-    variant="secondary"
-    :title="theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'"
-    @click="toggleTheme" />
-</template>