vlite3 0.1.0 → 0.1.2

package/src/components/DataTable/DataTableRow.vue

@@ -1,171 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import CheckBox from '../CheckBox.vue'
-import type { TableHeader } from './types'
-
-interface Props {
-  row: any
-  headers: TableHeader[]
-  index: number
-  keyField: string
-  selectable?: boolean
-  isSelected?: boolean
-  hoverable?: boolean
-  striped?: boolean
-  compact?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  keyField: '_id',
-  selectable: false,
-  isSelected: false,
-  hoverable: true,
-  striped: false,
-  compact: false,
-})
-
-const emit = defineEmits<{
-  (e: 'select', id: any): void
-  (e: 'rowClick', payload: { row: any; index: number }): void
-}>()
-
-const getNestedValue = (obj: any, path: string): any => {
-  return path.split('.').reduce((acc, part) => acc?.[part], obj)
-}
-
-const formatValue = (header: TableHeader, value: any, row: any): string => {
-  if (header.format) {
-    return header.format(value, row)
-  }
-
-  if (value === null || value === undefined) {
-    return '-'
-  }
-
-  if (header.type === 'price') {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-    }).format(Number(value))
-  }
-
-  if (header.type === 'date') {
-    return new Date(value).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-    })
-  }
-
-  if (header.type === 'number') {
-    return new Intl.NumberFormat('en-US').format(Number(value))
-  }
-
-  return String(value)
-}
-
-const getCellClass = (header: TableHeader, value: any, row: any): string => {
-  const classes: string[] = []
-
-  if (header.capitalize) {
-    classes.push('capitalize')
-  }
-
-  if (header.addStatusColor) {
-    const statusClasses = getStatusClass(value)
-    if (statusClasses) classes.push(statusClasses)
-  }
-
-  if (typeof header.class === 'function') {
-    const dynamicClass = header.class(value, row)
-    if (dynamicClass) classes.push(dynamicClass)
-  } else if (header.class) {
-    classes.push(header.class)
-  }
-
-  return classes.join(' ')
-}
-
-const getStatusClass = (value: any): string => {
-  const statusMap: Record<string, string> = {
-    active: 'text-success font-medium',
-    inactive: 'text-muted-foreground',
-    pending: 'text-warning font-medium',
-    completed: 'text-success font-medium',
-    cancelled: 'text-destructive font-medium',
-    failed: 'text-destructive font-medium',
-    success: 'text-success font-medium',
-    error: 'text-destructive font-medium',
-    warning: 'text-warning font-medium',
-    info: 'text-info font-medium',
-    high: 'text-destructive font-medium',
-    medium: 'text-warning font-medium',
-    low: 'text-muted-foreground',
-  }
-
-  const normalized = String(value)
-    .toLowerCase()
-    .replace(/[-_\s]/g, '')
-  return statusMap[normalized] || ''
-}
-
-const alignClass = (header: TableHeader): string => {
-  const alignMap = {
-    left: 'text-left',
-    center: 'text-center',
-    right: 'text-right',
-  }
-  return alignMap[header.align || 'left']
-}
-
-const rowId = computed(() => getNestedValue(props.row, props.keyField))
-
-const handleRowClick = () => {
-  emit('rowClick', { row: props.row, index: props.index })
-}
-
-const handleSelect = () => {
-  emit('select', rowId.value)
-}
-</script>
-
-<template>
-  <tr
-    class="border-b border-border/70 transition-colors data-[state=selected]:bg-muted h-full"
-    :class="[
-      hoverable ? 'hover:bg-muted/80' : '',
-      striped && index % 2 === 1 ? 'bg-muted/20' : 'bg-background',
-      isSelected ? 'bg-muted! hover:bg-muted/30' : '',
-      'group',
-    ]"
-    :data-state="isSelected ? 'selected' : undefined"
-    @click="handleRowClick">
-    <td
-      v-if="selectable"
-      class="w-[48px] px-0 py-3 align-middle text-center"
-      style="width: 48px"
-      @click.stop>
-      <div class="flex items-center justify-center">
-        <CheckBox :model-value="isSelected" size="xs" @update:model-value="handleSelect" />
-      </div>
-    </td>
-
-    <td
-      v-for="header in headers"
-      :key="header.field"
-      class="align-middle overflow-hidden"
-      :class="[
-        compact ? 'p-2 text-xs' : 'py-3! px-3 text-sm',
-        alignClass(header),
-        header.hideOnMobile ? 'hidden md:table-cell' : '',
-        getCellClass(header, getNestedValue(row, header.field), row),
-      ]">
-      <slot :name="header.field" :value="row" :row="row" :index="index" :field="header.field">
-        <span
-          class="truncate block"
-          :title="String(getNestedValue(row, header.field))"
-          v-html="formatValue(header, getNestedValue(row, header.field), row)" />
-      </slot>
-    </td>
-  </tr>
-</template>

package/src/components/DataTable/DataTableToolbar.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import Input from '../Input.vue'
-
-interface Props {
-  modelValue?: string
-  showSearch?: boolean
-  placeholder?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  showSearch: true,
-  placeholder: 'Search...',
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-}>()
-
-const searchValue = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-})
-</script>
-
-<template>
-  <div class="flex flex-col sm:flex-row items-center gap-4 p-1">
-    <div class="flex items-center gap-3" v-if="$slots?.left">
-      <slot name="left" />
-    </div>
-    <div class="w-full sm:w-72! mr-auto!" v-if="showSearch">
-      <Input
-        v-model="searchValue"
-        :placeholder="placeholder"
-        icon="lucide:search"
-        variant="outline"
-        class="bg-background"
-        :show-clear-button="true" />
-    </div>
-    <div class="ml-auto flex items-center gap-3">
-      <slot name="right" />
-    </div>
-  </div>
-</template>

package/src/components/DataTable/index.ts

@@ -1,5 +0,0 @@
-export { default as DataTable } from './DataTable.vue'
-export { default as DataTableHeader } from './DataTableHeader.vue'
-export { default as DataTableRow } from './DataTableRow.vue'
-
-export * from './types'

package/src/components/DataTable/types.ts

@@ -1,85 +0,0 @@
-export interface PaginationConfig {
-  page: number
-  limit: number
-}
-
-export interface SortConfig {
-  field: string
-  order: 'asc' | 'desc' | ''
-}
-
-export interface TableState {
-  pagination: PaginationConfig
-  sorting: SortConfig
-  search: string
-}
-
-export interface FilterConfig {
-  search: string
-  sorting: SortConfig
-  [key: string]: any
-}
-
-export interface TableFilter {
-  pagination: PaginationConfig
-  filter: FilterConfig
-}
-
-export interface TableHeader {
-  field: string
-  title: string
-  width?: string
-  minWidth?: string
-  sortable?: boolean
-  hideOnMobile?: boolean
-  align?: 'left' | 'center' | 'right'
-  format?: (value: any, row?: any) => string
-  class?: string | ((value: any, row?: any) => string)
-  capitalize?: boolean
-  addStatusColor?: boolean
-  type?: 'text' | 'price' | 'date' | 'number'
-}
-
-export interface PageInfo {
-  currentPage: number
-  totalPages: number
-  totalItems: number
-  itemsPerPage?: number
-}
-
-export interface DataTableProps {
-  rows: any[]
-  selectedRows?: any[]
-  // Toolbar Props
-  search?: string
-  showSearch?: boolean
-  searchPlaceholder?: string
-  headers: TableHeader[]
-  keyField?: string
-  loading?: boolean
-  selectable?: boolean
-  emptyMessage?: string
-  emptyIcon?: string
-  showPagination?: boolean
-  pageInfo?: PageInfo
-  itemsPerPage?: number
-  itemsPerPageOptions?: number[]
-  showItemsPerPage?: boolean
-  striped?: boolean
-  hoverable?: boolean
-  bordered?: boolean
-  compact?: boolean
-  tableClass?: string
-  class?: string
-}
-
-export interface SelectionState {
-  selected: any[]
-  all: boolean
-  indeterminate: boolean
-}
-
-export interface RowClickPayload {
-  row: any
-  index: number
-}

package/src/components/DatePicker.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { DatePickerMode } from 'v-datepicker-lite/types'
-import Button from './Button.vue'
-import type { ButtonSize, ButtonVariant } from '@/types'
-import { Dropdown } from './Dropdown'
-import DatePickerLite from 'v-datepicker-lite'
-import 'v-datepicker-lite/style.css'
-
-const props = withDefaults(
-  defineProps<{
-    placeholder?: string
-    modelValue?: any
-    value?: any
-    mode: DatePickerMode
-    minDate?: string
-    icon?: string
-    size?: ButtonSize
-    variant?: ButtonVariant
-    btnProps?: any
-    teleport?: boolean
-    minuteInterval?: number
-  }>(),
-  {
-    minuteInterval: 5,
-    teleport: true,
-  }
-)
-
-const emit = defineEmits(['update:modelValue', 'onChange'])
-
-const actualValue = computed({
-  get: () => props.modelValue ?? props.value,
-  set: (val) => {
-    emit('update:modelValue', val)
-    emit('onChange', val)
-  },
-})
-
-const hasTimePart = (val: any): boolean => {
-  if (val instanceof Date) {
-    return val.getHours() !== 0 || val.getMinutes() !== 0
-  }
-
-  if (typeof val === 'string') {
-    return val.includes('T') || /\d{2}:\d{2}/.test(val)
-  }
-
-  return false
-}
-
-const displayValue = computed(() => {
-  if (!actualValue.value) return ''
-
-  try {
-    const d = new Date(actualValue.value)
-    if (isNaN(d.getTime())) return String(actualValue.value)
-
-    const showTime = props.mode === 'dateTime' && hasTimePart(actualValue.value)
-
-    return d.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-      ...(showTime ? { hour: '2-digit', minute: '2-digit' } : {}),
-    })
-  } catch (e) {
-    return String(actualValue.value)
-  }
-})
-
-const handleDateChange = (val: any) => {
-  actualValue.value = val
-}
-</script>
-
-<template>
-  <Dropdown position="bottom-start" class="w-full" :teleport="teleport">
-    <template #trigger>
-      <slot :value="actualValue" :displayValue="displayValue">
-        <Button
-          :text="displayValue || placeholder || 'Select date'"
-          :variant="variant || 'outline'"
-          :size="size || 'md'"
-          :icon="icon || 'lucide:calendar'"
-          v-bind="btnProps"
-          class="w-full" />
-      </slot>
-    </template>
-
-    <div class="min-w-[300px] overflow-hidden">
-      <DatePickerLite
-        :value="actualValue"
-        :mode="mode"
-        :min-date="minDate"
-        class="w-full"
-        :minuteInterval="minuteInterval"
-        timeFormat="12h"
-        @change="handleDateChange" />
-    </div>
-  </Dropdown>
-</template>