vlite3 0.1.0 → 0.1.2

package/src/components/Masonry/Masonry.vue

@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import type { MasonryProps } from './types'
-import { MASONRY_BREAKPOINTS } from './types'
-import { debounce } from '@/utils'
-
-const props = withDefaults(defineProps<MasonryProps>(), {
-  cols: () => ({ default: 1, sm: 2, lg: 3 }),
-  gap: 16,
-  tag: 'div',
-  itemKey: 'id',
-})
-
-const containerRef = ref<HTMLElement | null>(null)
-const containerWidth = ref(0)
-const resizeObserver = ref<ResizeObserver | null>(null)
-
-const updateWidth = () => {
-  if (containerRef.value) {
-    containerWidth.value = containerRef.value.clientWidth
-  }
-}
-
-// Compute current column count based on width and breakpoints
-const columnCount = computed(() => {
-  // If cols is just a number, fixed columns
-  if (typeof props.cols === 'number') return props.cols
-
-  const width = containerWidth.value
-  // Default to 1 if 0 width (initial render/SSR)
-  if (!width) return props.cols.default || 1
-
-  let count = props.cols.default || 1
-
-  // Sort breakpoints to find the largest matching one
-  const sortedBreakpoints = Object.keys(props.cols)
-    .map((k) => {
-      let px = 0
-      if (typeof k === 'number' || !isNaN(Number(k))) {
-        px = Number(k)
-      } else if (k in MASONRY_BREAKPOINTS) {
-        px = MASONRY_BREAKPOINTS[k]
-      }
-      return { k, px, val: props.cols[k as keyof typeof props.cols] }
-    })
-    .filter((bp) => bp.val !== undefined)
-    .sort((a, b) => a.px - b.px)
-
-  // Iterate to find the highest match
-  for (const bp of sortedBreakpoints) {
-    if (width >= bp.px) {
-      count = bp.val
-    }
-  }
-
-  return count || 1
-})
-
-// Distribute items into columns
-const columns = computed(() => {
-  const count = columnCount.value
-  // Initialize columns
-  const result: any[][] = Array.from({ length: count }, () => [])
-
-  // Round Robin Distribution (Fastest O(N))
-  // Optimized for stability: only appending items changes the last arrays,
-  // unless column count changes.
-  const len = props.data.length
-  for (let i = 0; i < len; i++) {
-    // Store both data and original index
-    result[i % count].push({
-      data: props.data[i],
-      index: i,
-    })
-  }
-
-  // Note: We avoid .forEach for slightly better raw perf on thousands of items
-  return result
-})
-
-// Lifecycle
-onMounted(() => {
-  // Initial measure
-  updateWidth()
-
-  const onResize = debounce((entries: ResizeObserverEntry[]) => {
-    const entry = entries[0]
-    if (entry) {
-      containerWidth.value = entry.contentRect.width
-    }
-  }, 100)
-
-  resizeObserver.value = new ResizeObserver(onResize)
-  if (containerRef.value) {
-    resizeObserver.value.observe(containerRef.value)
-  }
-})
-
-onUnmounted(() => {
-  if (resizeObserver.value) {
-    resizeObserver.value.disconnect()
-    resizeObserver.value = null
-  }
-})
-
-// Helpers for keys
-const getItemKey = (wrapper: any, index: number) => {
-  // If wrapper has data property (which it should), use it
-  const item = wrapper.data
-  if (item && typeof item === 'object' && props.itemKey in item) {
-    return item[props.itemKey]
-  }
-  return index
-}
-</script>
-
-<template>
-  <component :is="tag" ref="containerRef" class="flex w-full" :style="{ gap: `${gap}px` }">
-    <div
-      v-for="(col, colIndex) in columns"
-      :key="colIndex"
-      class="flex flex-col flex-1 min-w-0"
-      :style="{ gap: `${gap}px` }"
-      role="list">
-      <div
-        v-for="(wrapper, listIndex) in col"
-        :key="getItemKey(wrapper, listIndex)"
-        class="masonry-item"
-        role="listitem">
-        <slot :data="wrapper.data" :index="wrapper.index" :colIndex="colIndex"></slot>
-      </div>
-    </div>
-  </component>
-</template>
-
-<style scoped>
-/* 
-   Content Visibility Optimization 
-   Allows browser to skip layout/paint for off-screen items.
-   'content-visibility: auto' is the key for scroll performance with large DOMs.
-   'contain-intrinsic-size' provides a placeholder size to minimize scrollbar jumpiness.
-   We assume a rough average height of 150px-300px for masonry items.
-*/
-.masonry-item {
-  content-visibility: auto;
-  contain-intrinsic-size: 1px 200px;
-}
-</style>

package/src/components/Masonry/index.ts

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

package/src/components/Masonry/types.ts

@@ -1,44 +0,0 @@
-export interface MasonryProps {
-  /**
-   * Array of items to render
-   */
-  data: any[]
-
-  /**
-   * Column configuration object.
-   * Can be number keys (width in px) or string keys ('sm', 'md', 'lg', 'xl', '2xl').
-   * Values are element counts.
-   * Example: { default: 1, md: 2, lg: 3 }
-   */
-  cols?: number | Record<string | number, number>
-
-  /**
-   * Gap between columns and rows (in px or tailwind class number equivalent if implemented manually).
-   * For simplicity here, we assume it's a number representing pixels or 'rem' spacing via style,
-   * or a simple numeric multiplier for standard spacing.
-   * Defaults to 16 (px) or similar.
-   */
-  gap?: number
-
-  /**
-   * Element used for the root container
-   */
-  tag?: string
-
-  /**
-   * Key property name in data items to use as unique key.
-   * Defaults to 'id'. If not found, uses index (not recommended for large lists).
-   */
-  itemKey?: string
-}
-
-/**
- * Breakpoint values mapping in pixels
- */
-export const MASONRY_BREAKPOINTS: Record<string, number> = {
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280,
-  '2xl': 1536,
-}

package/src/components/Modal.vue

@@ -1,135 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted } from 'vue'
-import Button from './Button.vue'
-import { useKeyStroke } from '../composables/useKeyStroke'
-
-interface Props {
-  show: boolean
-  title?: string
-  maxWidth?: string
-  closeOutside?: boolean
-  backdrop?: boolean
-  description?: string
-  triggerClass?: string
-  bodyClass?: string
-  headerClass?: string
-  footerClass?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  show: false,
-  backdrop: true,
-  maxWidth: 'sm:max-w-lg',
-  closeOutside: true,
-})
-
-const emit = defineEmits<{
-  (e: 'close'): void
-  (e: 'update:show', value: boolean): void
-  (e: 'onOpen'): void
-}>()
-
-const visible = ref(props.show)
-
-watch(
-  () => props.show,
-  (val) => {
-    visible.value = val
-    if (val) emit('onOpen')
-  }
-)
-
-const handleOpen = () => {
-  visible.value = true
-}
-
-const close = () => {
-  visible.value = false
-  emit('update:show', false)
-  emit('close')
-}
-
-const handleBackdropClick = () => {
-  if (props.closeOutside) {
-    close()
-  }
-}
-
-// Escape key handling
-const { onKeyStroke } = useKeyStroke()
-onKeyStroke('Escape', close)
-
-// Prevent body scroll when open
-watch(visible, (val) => {
-  if (val) {
-    document.body.style.overflow = 'hidden'
-  } else {
-    document.body.style.overflow = ''
-  }
-})
-
-// Clean up on unmount
-onUnmounted(() => {
-  document.body.style.overflow = ''
-})
-</script>
-
-<template>
-  <span @click.stop="handleOpen" :class="`${triggerClass}`">
-    <slot name="trigger" />
-  </span>
-  <Teleport to="body">
-    <Transition
-      enter-active-class="transition duration-200 ease-out"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-active-class="transition duration-150 ease-in"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0">
-      <div
-        v-if="visible"
-        class="fixed inset-0 z-50 flex items-center justify-center bg-[#00000077] p-4"
-        :class="backdrop && 'backdrop-blur-[2px]'"
-        @click="handleBackdropClick">
-        <div
-          class="modal-body relative w-full rounded border border-border bg-body text-foreground shadow-lg flex flex-col max-h-[85vh] sm:max-h-[90vh]"
-          :class="[maxWidth]"
-          @click.stop>
-          <!-- Header -->
-          <div v-if="title" class="flex-none flex flex-col space-y-1.5 pb-0 border-b">
-            <div
-              class="flex items-center justify-between bg-muted py-1 px-4 rounded-t-md"
-              :class="headerClass">
-              <h3 class="text-lg font-semibold leading-none tracking-tight">
-                {{ title }}
-              </h3>
-              <Button
-                rounded="full"
-                size="sm"
-                icon="lucide:x"
-                variant="ghost"
-                class="hover:bg-gray-250/25!"
-                @click="close" />
-            </div>
-          </div>
-
-          <!-- Body -->
-          <div class="flex-1 overflow-y-auto px-4 py-4 min-h-0" :class="bodyClass">
-            <p v-if="description" class="text-sm text-muted-foreground mb-2">
-              {{ description }}
-            </p>
-            <slot :close="close" />
-          </div>
-
-          <!-- Footer Slot if needed -->
-          <div
-            v-if="$slots.footer"
-            :class="footerClass"
-            class="flex-none flex items-center px-4 py-2.5 border-t rounded-b-xl">
-            <slot name="footer" :close="close" />
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>

package/src/components/MultiSelect/MultiSelect.vue

@@ -1,176 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import Icon from '../Icon.vue'
-import { Dropdown, DropdownMenu } from '@/components/Dropdown'
-import Badge from '@/components/Badge.vue'
-import type { IDropdownOption, IDropdownOptions } from '@/types'
-
-// Props
-interface Props {
-  modelValue?: any[]
-  options?: IDropdownOptions
-  placeholder?: string
-  disabled?: boolean
-  searchable?: boolean
-
-  variant?: 'default' | 'outline' | 'solid'
-  size?: 'sm' | 'md' | 'lg'
-  maxVisible?: number // Max tabs to show before +N
-  // Advanced Dropdown Props
-  loading?: boolean
-  hasMore?: boolean
-  remote?: boolean
-  layout?: 'default' | 'grouped'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => [],
-  options: () => [],
-  placeholder: 'Select items...',
-  disabled: false,
-  searchable: true,
-  variant: 'outline',
-  size: 'md',
-  maxVisible: 2,
-  loading: false,
-  hasMore: false,
-  remote: false,
-  layout: 'default',
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: any[]): void
-  (e: 'change', value: any[]): void
-  (e: 'load-more'): void
-  (e: 'search', query: string): void
-}>()
-
-const isOpen = ref(false)
-
-// Computed
-const selectedOptions = computed(() => {
-  return props.options.filter((opt) => {
-    const val = opt.value ?? opt.label
-    return props.modelValue.includes(val)
-  })
-})
-
-const visibleSelections = computed(() => {
-  return selectedOptions.value.slice(0, props.maxVisible)
-})
-
-const hiddenCount = computed(() => {
-  return selectedOptions.value.length - props.maxVisible
-})
-
-const handleSelect = (option: IDropdownOption) => {
-  const val = option.value ?? option.label
-  const newValue = [...props.modelValue]
-  const index = newValue.indexOf(val)
-
-  if (index === -1) {
-    newValue.push(val)
-  } else {
-    newValue.splice(index, 1)
-  }
-
-  emit('update:modelValue', newValue)
-  emit('change', newValue)
-  // Do not close on select for multi-select
-}
-
-const removeOption = (value: any) => {
-  const newValue = props.modelValue.filter((v) => v !== value)
-  emit('update:modelValue', newValue)
-  emit('change', newValue)
-}
-
-const clearAll = () => {
-  emit('update:modelValue', [])
-  emit('change', [])
-}
-
-// Styling
-const triggerClasses = computed(() => {
-  return [
-    'flex items-center justify-between w-full min-h-[40px] px-3 py-1.5 rounded-md border text-sm transition-colors cursor-pointer',
-    props.disabled ? 'opacity-50 cursor-not-allowed bg-muted' : 'bg-background hover:bg-accent',
-    props.variant === 'outline' ? 'border-input' : 'border-transparent bg-muted',
-    isOpen.value ? 'border-primary' : '',
-  ].join(' ')
-})
-
-const badgeSize = computed(() => (props.size === 'sm' ? 'xs' : 'sm'))
-</script>
-
-<template>
-  <Dropdown
-    v-model:isOpen="isOpen"
-    :close-on-select="false"
-    :selectable="true"
-    :disabled="disabled">
-    <template #trigger="{ isOpen }">
-      <div :class="triggerClasses">
-        <div class="flex flex-wrap gap-1.5 items-center flex-1 min-w-0 py-0.5">
-          <span v-if="selectedOptions.length === 0" class="text-muted-foreground pl-1">
-            {{ placeholder }}
-          </span>
-
-          <template v-else>
-            <!-- Visible Badges -->
-            <Badge
-              v-for="opt in visibleSelections"
-              :key="opt.value"
-              variant="secondary"
-              class="gap-1 pr-1 truncate max-w-[150px]">
-              <span class="truncate">{{ opt.label }}</span>
-              <button
-                v-if="!disabled"
-                @click.stop="removeOption(opt.value)"
-                class="hover:bg-destructive/10 hover:text-destructive rounded-full p-0.5 transition-colors">
-                <Icon icon="lucide:x" class="w-3 h-3" />
-              </button>
-            </Badge>
-
-            <!-- +N Badge -->
-            <Badge
-              v-if="hiddenCount > 0"
-              variant="secondary"
-              class="font-normal text-muted-foreground">
-              +{{ hiddenCount }}
-            </Badge>
-          </template>
-        </div>
-
-        <div class="flex items-center gap-2 pl-2 shrink-0 text-muted-foreground">
-          <Icon
-            v-if="selectedOptions.length > 0 && !disabled"
-            icon="lucide:x"
-            class="w-4 h-4 hover:text-foreground transition-colors"
-            @click.stop="clearAll" />
-          <div class="w-px h-4 bg-border mx-0.5"></div>
-          <Icon
-            icon="lucide:chevron-down"
-            class="w-4 h-4 transition-transform duration-200"
-            :class="{ 'rotate-180': isOpen }" />
-        </div>
-      </div>
-    </template>
-
-    <template #default>
-      <DropdownMenu
-        :options="options"
-        :selected="modelValue"
-        class="min-w-[300px]"
-        :loading="loading"
-        :hasMore="hasMore"
-        :searchable="searchable"
-        :remote="remote"
-        :layout="layout"
-        @select="handleSelect"
-        @close="isOpen = false"
-        @load-more="$emit('load-more')"
-        @search="(q) => $emit('search', q)" />
-    </template>
-  </Dropdown>
-</template>

package/src/components/MultiSelect/index.ts

@@ -1 +0,0 @@
-export { default as MultiSelect } from './MultiSelect.vue'