vlite3 0.1.0 → 0.1.2

package/src/components/Pagination/Pagination.vue

@@ -1,238 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import Icon from '../Icon.vue'
-import Button from '@/components/Button.vue'
-
-interface Props {
-  currentPage?: number
-  totalPages: number
-  siblingCount?: number
-  disabled?: boolean
-  showEdges?: boolean
-
-  // New Feature Props
-  showPageInfo?: boolean // "Page 1 of 10"
-  showItemsPerPage?: boolean // "Show 10"
-  itemsPerPage?: number
-  itemsPerPageOptions?: number[]
-  navType?: 'text' | 'icon' // Default 'text' (responsive) vs 'icon' (always arrows)
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  currentPage: 1,
-  siblingCount: 1,
-  disabled: false,
-  showEdges: false,
-  showPageInfo: false,
-  showItemsPerPage: false,
-  itemsPerPage: 10,
-  itemsPerPageOptions: () => [10, 25, 50, 100],
-  navType: 'text',
-})
-
-const emit = defineEmits<{
-  (e: 'update:currentPage', value: number): void
-  (e: 'change', value: number): void
-  (e: 'update:itemsPerPage', value: number): void
-  (e: 'change:itemsPerPage', value: number): void
-}>()
-
-const handlePageChange = (page: number) => {
-  if (props.disabled) return
-  if (page < 1 || page > props.totalPages) return
-  if (page === props.currentPage) return
-
-  emit('update:currentPage', page)
-  emit('change', page)
-}
-
-const handleItemsPerPageChange = (event: Event) => {
-  const target = event.target as HTMLSelectElement
-  const value = parseInt(target.value)
-  emit('update:itemsPerPage', value)
-  emit('change:itemsPerPage', value)
-
-  // Reset to page 1 is usually good practice when changing limit, but let parent decide
-  emit('update:currentPage', 1)
-  emit('change', 1)
-}
-
-// Logic to generate the range of page numbers
-const paginationRange = computed(() => {
-  const totalPageNumbers = props.siblingCount * 2 + 5
-
-  if (totalPageNumbers >= props.totalPages) {
-    return range(1, props.totalPages)
-  }
-
-  const leftSiblingIndex = Math.max(props.currentPage - props.siblingCount, 1)
-  const rightSiblingIndex = Math.min(props.currentPage + props.siblingCount, props.totalPages)
-
-  const shouldShowLeftDots = leftSiblingIndex > 2
-  const shouldShowRightDots = rightSiblingIndex < props.totalPages - 2
-
-  const firstPageIndex = 1
-  const lastPageIndex = props.totalPages
-
-  if (!shouldShowLeftDots && shouldShowRightDots) {
-    let leftItemCount = 3 + 2 * props.siblingCount
-    let leftRange = range(1, leftItemCount)
-    return [...leftRange, 'DOTS', lastPageIndex]
-  }
-
-  if (shouldShowLeftDots && !shouldShowRightDots) {
-    let rightItemCount = 3 + 2 * props.siblingCount
-    let rightRange = range(props.totalPages - rightItemCount + 1, props.totalPages)
-    return [firstPageIndex, 'DOTS', ...rightRange]
-  }
-
-  if (shouldShowLeftDots && shouldShowRightDots) {
-    let middleRange = range(leftSiblingIndex, rightSiblingIndex)
-    return [firstPageIndex, 'DOTS', ...middleRange, 'DOTS', lastPageIndex]
-  }
-
-  return []
-})
-
-const range = (start: number, end: number) => {
-  let length = end - start + 1
-  return Array.from({ length }, (_, idx) => idx + start)
-}
-</script>
-
-<template>
-  <div
-    class="flex flex-col md:flex-row items-center gap-4 w-full"
-    :class="[showPageInfo || showItemsPerPage ? 'justify-between' : 'justify-center']">
-    <!-- Left Group: Page Info & Items Per Page -->
-    <div
-      v-if="showPageInfo || showItemsPerPage"
-      class="flex flex-wrap items-center justify-center md:justify-start gap-4 order-2 md:order-1">
-      <!-- Items Per Page -->
-      <div v-if="showItemsPerPage" class="flex items-center gap-2 text-sm text-muted-foreground">
-        <span class="whitespace-nowrap">Show</span>
-        <div class="relative">
-          <select
-            :value="itemsPerPage"
-            class="appearance-none bg-background border border-border hover:border-accent text-foreground py-1 pl-2 pr-6 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-            :disabled="disabled"
-            @change="handleItemsPerPageChange">
-            <option v-for="opt in itemsPerPageOptions" :key="opt" :value="opt">
-              {{ opt }}
-            </option>
-          </select>
-          <Icon
-            icon="lucide:chevron-down"
-            class="absolute right-1.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
-        </div>
-        <span class="whitespace-nowrap">per page</span>
-      </div>
-
-      <!-- Separator if both present (optional, or just gap) -->
-      <div v-if="showItemsPerPage && showPageInfo" class="hidden md:block w-px h-4 bg-border"></div>
-
-      <!-- Page Info -->
-      <span v-if="showPageInfo" class="text-sm text-muted-foreground whitespace-nowrap">
-        Page <span class="font-medium text-foreground">{{ currentPage }}</span> of
-        <span class="font-medium text-foreground">{{ totalPages }}</span>
-      </span>
-    </div>
-
-    <!-- Navigation (Right or Center) -->
-    <nav class="flex items-center justify-center gap-1 order-1 md:order-2" aria-label="Pagination">
-      <!-- First -->
-      <Button
-        v-if="showEdges"
-        variant="ghost"
-        size="sm"
-        icon="lucide:chevrons-left"
-        :disabled="disabled || currentPage === 1"
-        @click="handlePageChange(1)" />
-
-      <!-- Previous -->
-      <!-- Icon Only Mode -->
-      <Button
-        v-if="navType === 'icon'"
-        variant="ghost"
-        size="sm"
-        icon="lucide:chevron-left"
-        :disabled="disabled || currentPage === 1"
-        @click="handlePageChange(currentPage - 1)" />
-
-      <!-- Text Mode (Responsive) -->
-      <template v-else>
-        <Button
-          variant="ghost"
-          size="sm"
-          class="hidden sm:flex"
-          :disabled="disabled || currentPage === 1"
-          @click="handlePageChange(currentPage - 1)">
-          Previous
-        </Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          icon="lucide:chevron-left"
-          class="flex sm:hidden"
-          :disabled="disabled || currentPage === 1"
-          @click="handlePageChange(currentPage - 1)" />
-      </template>
-
-      <!-- Numbers -->
-      <template v-for="(page, index) in paginationRange" :key="index">
-        <div v-if="page === 'DOTS'" class="px-2 text-gray-400 select-none">...</div>
-        <Button
-          v-else
-          size="sm"
-          :variant="page === currentPage ? 'outline' : 'ghost'"
-          :class="{
-            'bg-white text-primary border-primary ring-1 ring-primary pointer-events-none z-10':
-              page === currentPage,
-            'text-gray-600 hover:bg-gray-100': page !== currentPage,
-          }"
-          :disabled="disabled"
-          @click="handlePageChange(page as number)">
-          {{ page }}
-        </Button>
-      </template>
-
-      <!-- Next -->
-      <!-- Icon Only Mode -->
-      <Button
-        v-if="navType === 'icon'"
-        variant="ghost"
-        size="sm"
-        icon="lucide:chevron-right"
-        :disabled="disabled || currentPage === totalPages"
-        @click="handlePageChange(currentPage + 1)" />
-
-      <!-- Text Mode (Responsive) -->
-      <template v-else>
-        <Button
-          variant="ghost"
-          size="sm"
-          class="hidden sm:flex"
-          :disabled="disabled || currentPage === totalPages"
-          @click="handlePageChange(currentPage + 1)">
-          Next
-        </Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          icon="lucide:chevron-right"
-          class="flex sm:hidden"
-          :disabled="disabled || currentPage === totalPages"
-          @click="handlePageChange(currentPage + 1)" />
-      </template>
-
-      <!-- Last -->
-      <Button
-        v-if="showEdges"
-        variant="ghost"
-        size="sm"
-        icon="lucide:chevrons-right"
-        :disabled="disabled || currentPage === totalPages"
-        @click="handlePageChange(totalPages)" />
-    </nav>
-  </div>
-</template>

package/src/components/Pagination/index.ts

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

package/src/components/PricingPlan/PricingPlan.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { PricingPlanItemSchema, PricingPlanVariant } from './types'
-import PricingPlanItem from './PricingPlanItem.vue'
-
-interface Props {
-  modelValue?: string | number | null
-  items: PricingPlanItemSchema[]
-  variant?: PricingPlanVariant
-  columns?: number | string
-  gap?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: null,
-  items: () => [],
-  variant: 'outline',
-  columns: 3,
-  gap: 6,
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string | number): void
-  (e: 'change', value: string | number): void
-}>()
-
-const handleSelect = (item: PricingPlanItemSchema) => {
-  emit('update:modelValue', item.id)
-  emit('change', item.id)
-}
-
-// Grid Styles
-const gridStyle = computed(() => {
-  const cols = props.columns
-  let colTemplate = ''
-
-  if (typeof cols === 'number') {
-    colTemplate = `repeat(${cols}, minmax(0, 1fr))`
-  } else {
-    colTemplate = cols
-  }
-
-  return {
-    display: 'grid',
-    gridTemplateColumns: colTemplate,
-    gap: `${props.gap * 4}px`, // assuming prop is in standard tailwind units (4px), or just pixels?
-    // Let's use it as tailwind multiplier for consistency if possible, but style takes pixels usually.
-    // If user passed 6, usually means gap-6 (1.5rem = 24px).
-    // Let's map it roughly or just use class if possible.
-    // Actually dynamic gap via style is easier for custom.
-    // Let's assume input is pixels if large, or multiple of 4 if small?
-    // Let's just rely on classes for standard gaps, or style for custom.
-    // To be safe and simple, let's use class for standard grid, or style for columns.
-  }
-})
-
-// Responsive Grid Classes (Tailwind)
-// If columnsProp is dynamic, we use style.
-// If not, we might want responsive defaults?
-// The user asked for "proper layout".
-// Let's try to be smart: Use a responsive grid class by default if columns is 3.
-const gridClasses = computed(() => {
-  // If it's the default 3, use responsive tailwind
-  if (props.columns === 3) {
-    return 'grid grid-cols-1 md:grid-cols-3'
-  }
-  if (props.columns === 2) {
-    return 'grid grid-cols-1 md:grid-cols-2'
-  }
-  if (props.columns === 4) {
-    return 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
-  }
-  // Fallback to style for custom
-  return ''
-})
-
-const finalGapClass = computed(() => {
-  // Map number to tailwind gap class
-  return `gap-${props.gap}`
-})
-
-const containerStyle = computed(() => {
-  if (gridClasses.value) return {} // handled by classes
-  return {
-    display: 'grid',
-    gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))`,
-    gap: `${props.gap * 4}px`,
-  }
-})
-</script>
-
-<template>
-  <div class="w-full" :class="[gridClasses, finalGapClass]" :style="containerStyle">
-    <PricingPlanItem
-      v-for="item in items"
-      :key="item.id"
-      :item="item"
-      :selected="modelValue === item.id"
-      :variant="variant"
-      @select="handleSelect" />
-  </div>
-</template>

package/src/components/PricingPlan/PricingPlanItem.vue

@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { PricingPlanItemSchema } from './types'
-import Icon from '../Icon.vue'
-import Button from '../Button.vue'
-import Badge from '../Badge.vue'
-
-interface Props {
-  item: PricingPlanItemSchema
-  selected?: boolean
-  variant?: 'outline' | 'solid'
-  selectable?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  selected: false,
-  variant: 'outline',
-  selectable: true,
-})
-
-const emit = defineEmits<{
-  (e: 'select', item: PricingPlanItemSchema): void
-}>()
-
-const handleClick = () => {
-  if (props.selectable) {
-    emit('select', props.item)
-  }
-}
-
-// Computeds
-const isPopular = computed(() => props.item.popular || props.item.recommended)
-
-const containerClasses = computed(() => {
-  const base =
-    'relative flex flex-col p-8 rounded-2xl transition-all duration-300 cursor-pointer group isolation-auto'
-
-  // Base White Styling
-  // We strictly use bg-card (usually white) or explicit white to ensure it pops against any background.
-  let styleClasses = 'bg-card text-card-foreground'
-
-  if (props.selected) {
-    // Selected State: White card with Strong Border + Shadow
-    // No background tint to keep it "Clean White"
-    styleClasses += ' border-2 border-primary shadow-xl scale-[1.02] z-10'
-  } else {
-    // Normal State
-    styleClasses +=
-      ' border border-muted hover:border-primary/30 hover:shadow-lg hover:-translate-y-1'
-  }
-
-  return `${base} ${styleClasses}`
-})
-
-const badgeVariant = computed(() => {
-  return props.selected ? 'default' : 'secondary'
-})
-
-const buttonVariant = computed(() => {
-  // If selected, primary button.
-  // If popular, primary button.
-  // Otherwise outline.
-  if (props.selected) return 'primary'
-  if (isPopular.value) return 'primary'
-  return 'outline'
-})
-
-// Feature Helper
-const getFeatureText = (feature: string | { text: string }) => {
-  return typeof feature === 'string' ? feature : feature.text
-}
-
-const isFeatureIncluded = (feature: string | { included?: boolean }) => {
-  if (typeof feature === 'string') return true
-  return feature.included !== false
-}
-</script>
-
-<template>
-  <div :class="containerClasses" @click="handleClick">
-    <!-- Popular Badge -->
-    <div v-if="isPopular" class="absolute -top-3 left-1/2 -translate-x-1/2 z-20">
-      <Badge
-        :variant="badgeVariant"
-        class="shadow-sm px-4 py-1 text-xs uppercase tracking-wider font-bold">
-        {{ item.recommended ? 'Recommended' : 'Most Popular' }}
-      </Badge>
-    </div>
-
-    <!-- Header -->
-    <div class="mb-6 text-center">
-      <h3 class="text-xl font-bold text-foreground tracking-tight">{{ item.title }}</h3>
-      <p
-        v-if="item.description"
-        class="text-sm text-muted-foreground mt-2 min-h-[40px] leading-relaxed">
-        {{ item.description }}
-      </p>
-    </div>
-
-    <!-- Price -->
-    <div class="mb-8 text-center flex items-center justify-center">
-      <span class="text-4xl font-extrabold text-foreground tracking-tight">{{ item.price }}</span>
-      <span
-        v-if="item.period"
-        class="text-muted-foreground text-sm font-medium ml-1 self-end mb-1.5 opacity-80"
-        >{{ item.period }}</span
-      >
-    </div>
-
-    <!-- Divider (Subtle) -->
-    <!-- <div class="h-px w-full bg-border/50 mb-6"></div> -->
-
-    <!-- Features -->
-    <ul class="flex-1 space-y-4 mb-8">
-      <li
-        v-for="(feature, idx) in item.features"
-        :key="idx"
-        class="flex items-start gap-3 text-sm group/feature">
-        <div class="mt-0.5 shrink-0 transition-transform group-hover/feature:scale-110">
-          <Icon
-            v-if="isFeatureIncluded(feature)"
-            icon="lucide:check"
-            class="w-4 h-4 text-primary font-bold" />
-          <Icon v-else icon="lucide:minus" class="w-4 h-4 text-muted-foreground/30" />
-        </div>
-        <span
-          :class="
-            isFeatureIncluded(feature)
-              ? 'text-foreground/90 font-medium'
-              : 'text-muted-foreground/60 decoration-slate-300/50'
-          ">
-          {{ getFeatureText(feature) }}
-        </span>
-      </li>
-    </ul>
-
-    <!-- Action Button -->
-    <div class="mt-auto pt-4 border-t border-border/40">
-      <Button
-        :variant="buttonVariant"
-        class="w-full font-semibold shadow-sm rounded-lg"
-        :class="{ 'ring-2 ring-primary ring-offset-2': selected }"
-        size="lg">
-        {{ item.buttonText || (selected ? 'Selected' : 'Choose Plan') }}
-      </Button>
-    </div>
-  </div>
-</template>

package/src/components/PricingPlan/index.ts

@@ -1,3 +0,0 @@
-export { default as PricingPlan } from './PricingPlan.vue'
-export { default as PricingPlanItem } from './PricingPlanItem.vue'
-export * from './types'

package/src/components/PricingPlan/types.ts

@@ -1,29 +0,0 @@
-export interface PricingPlanFeature {
-  text: string
-  included: boolean
-}
-
-export interface PricingPlanItemSchema {
-  id: string | number
-  title: string
-  price: string | number
-  period?: string // e.g. '/month', '/year'
-  description?: string
-  features?: (string | PricingPlanFeature)[]
-  popular?: boolean
-  recommended?: boolean // alias for popular or specific badge
-  buttonText?: string
-  variant?: 'outline' | 'solid'
-  // Allow arbitrary data
-  [key: string]: any
-}
-
-export type PricingPlanVariant = 'outline' | 'solid'
-
-export interface PricingPlanProps {
-  items: PricingPlanItemSchema[]
-  modelValue?: string | number | null
-  variant?: PricingPlanVariant
-  columns?: number | string // Grid columns
-  gap?: number
-}