@geniusdynamics/ns8-ui-lib 1.0.0

package/src/components/NS/pagination/NSPagination.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  currentPage?: number
+  totalItems?: number
+  itemsPerPage?: number
+  totalPages?: number
+  showSizeChanger?: boolean
+  pageSizeOptions?: number[]
+  showQuickJumper?: boolean
+  showTotal?: boolean
+  disabled?: boolean
+  size?: 'sm' | 'default' | 'lg'
+  align?: 'start' | 'center' | 'end'
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  currentPage: 1,
+  itemsPerPage: 10,
+  showSizeChanger: false,
+  pageSizeOptions: () => [10, 20, 50, 100],
+  showQuickJumper: false,
+  showTotal: true,
+  disabled: false,
+  size: 'default',
+  align: 'start',
+})
+
+const emit = defineEmits<{
+  'update:currentPage': [page: number]
+  'update:itemsPerPage': [size: number]
+  'page-change': [page: number]
+  'size-change': [size: number]
+}>()
+
+const calculatedTotalPages = computed(() => {
+  if (props.totalPages) {
+    return props.totalPages
+  }
+  return Math.ceil((props.totalItems || 0) / props.itemsPerPage)
+})
+
+const currentPageInternal = computed({
+  get: () => props.currentPage,
+  set: (page: number) => {
+    emit('update:currentPage', page)
+    emit('page-change', page)
+  }
+})
+
+const itemsPerPageInternal = computed({
+  get: () => props.itemsPerPage,
+  set: (size: number) => {
+    emit('update:itemsPerPage', size)
+    emit('size-change', size)
+  }
+})
+
+const pages = computed(() => {
+  const total = calculatedTotalPages.value
+  const current = currentPageInternal.value
+  const delta = 2 // Number of pages to show on each side
+  
+  const range = []
+  const rangeWithDots = []
+  let l
+
+  for (let i = 1; i <= total; i++) {
+    if (i === 1 || i === total || (i >= current - delta && i <= current + delta)) {
+      range.push(i)
+    }
+  }
+
+  range.forEach((i, index) => {
+    if (l) {
+      if (i - l === 2) {
+        rangeWithDots.push(l + 1)
+      } else if (i - l !== 1) {
+        rangeWithDots.push('...')
+      }
+    }
+    rangeWithDots.push(i)
+    l = i
+  })
+
+  return rangeWithDots
+})
+
+const canGoPrev = computed(() => currentPageInternal.value > 1)
+const canGoNext = computed(() => currentPageInternal.value < calculatedTotalPages.value)
+
+const containerClasses = computed(() => {
+  const baseClasses = 'flex flex-wrap items-center gap-2'
+  
+  const alignClasses = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end'
+  }
+
+  const sizeClasses = {
+    sm: 'text-xs',
+    default: 'text-sm',
+    lg: 'text-base'
+  }
+
+  return cn(baseClasses, alignClasses[props.align], sizeClasses[props.size], props.class)
+})
+
+const buttonClasses = computed(() => {
+  const baseClasses = 'inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground h-8 w-8 p-0 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'
+  
+  const sizeClasses = {
+    sm: 'h-6 w-6 text-xs',
+    default: 'h-8 w-8 text-sm',
+    lg: 'h-10 w-10 text-base'
+  }
+
+  return cn(baseClasses, sizeClasses[props.size])
+})
+
+const activeButtonClasses = computed(() => {
+  return cn(buttonClasses.value, 'border-primary bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground')
+})
+
+const jumperClasses = computed(() => {
+  const baseClasses = 'inline-flex items-center rounded-md border border-input bg-background px-3 py-1 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+  
+  const sizeClasses = {
+    sm: 'px-2 py-0.5 text-xs',
+    default: 'px-3 py-1 text-sm',
+    lg: 'px-4 py-2 text-base'
+  }
+
+  return cn(baseClasses, sizeClasses[props.size])
+})
+
+const goToPage = (page: number) => {
+  if (page >= 1 && page <= calculatedTotalPages.value && !props.disabled) {
+    currentPageInternal.value = page
+  }
+}
+
+const handlePrev = () => {
+  if (canGoPrev.value && !props.disabled) {
+    currentPageInternal.value--
+  }
+}
+
+const handleNext = () => {
+  if (canGoNext.value && !props.disabled) {
+    currentPageInternal.value++
+  }
+}
+
+const handleJumperChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const page = parseInt(target.value, 10)
+  
+  if (!isNaN(page)) {
+    goToPage(page)
+  }
+}
+</script>
+
+<template>
+  <div :class="containerClasses">
+    <!-- Total items display -->
+    <div v-if="showTotal && totalItems" class="text-sm text-muted-foreground">
+      Total: {{ totalItems }} items
+    </div>
+
+    <!-- Page size changer -->
+    <div v-if="showSizeChanger" class="flex items-center gap-2">
+      <span class="text-sm text-muted-foreground">Items per page:</span>
+      <select 
+        v-model="itemsPerPageInternal"
+        :disabled="disabled"
+        :class="jumperClasses"
+      >
+        <option v-for="size in pageSizeOptions" :key="size" :value="size">
+          {{ size }}
+        </option>
+      </select>
+    </div>
+
+    <!-- Pagination buttons -->
+    <div class="flex items-center gap-1">
+      <!-- Previous button -->
+      <button
+        :class="buttonClasses"
+        :disabled="!canGoPrev || disabled"
+        @click="handlePrev"
+        aria-label="Previous page"
+      >
+        <ChevronLeft class="h-4 w-4" />
+      </button>
+
+      <!-- Page numbers -->
+      <template v-for="(page, index) in pages" :key="`page-${index}`">
+        <button
+          v-if="typeof page === 'number'"
+          :class="page === currentPageInternal ? activeButtonClasses : buttonClasses"
+          :disabled="disabled"
+          @click="goToPage(page)"
+        >
+          {{ page }}
+        </button>
+        <span
+          v-else
+          class="flex items-center justify-center h-8 w-8 text-sm text-muted-foreground"
+        >
+          <MoreHorizontal class="h-4 w-4" />
+        </span>
+      </template>
+
+      <!-- Next button -->
+      <button
+        :class="buttonClasses"
+        :disabled="!canGoNext || disabled"
+        @click="handleNext"
+        aria-label="Next page"
+      >
+        <ChevronRight class="h-4 w-4" />
+      </button>
+    </div>
+
+    <!-- Quick jumper -->
+    <div v-if="showQuickJumper" class="flex items-center gap-2">
+      <span class="text-sm text-muted-foreground">Go to page:</span>
+      <input
+        type="number"
+        :min="1"
+        :max="calculatedTotalPages"
+        :value="currentPageInternal"
+        :disabled="disabled"
+        :class="jumperClasses"
+        @change="handleJumperChange"
+        @keyup.enter="handleJumperChange"
+      />
+    </div>
+  </div>
+</template>

package/src/components/NS/progress/NSProgress.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  value?: number
+  max?: number
+  variant?: 'default' | 'destructive' | 'success' | 'warning' | 'info'
+  size?: 'default' | 'sm' | 'lg'
+  showLabel?: boolean
+  label?: string
+  indeterminate?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  max: 100,
+  variant: 'default',
+  size: 'default',
+  showLabel: false,
+  indeterminate: false,
+})
+
+const percentage = computed(() => {
+  if (props.indeterminate) return 0
+  return Math.min(Math.max((props.value || 0) / props.max * 100, 0), 100)
+})
+
+const containerClasses = computed(() => {
+  const baseClasses = 'relative w-full overflow-hidden rounded-full bg-secondary'
+  
+  const sizeClasses = {
+    default: 'h-2',
+    sm: 'h-1',
+    lg: 'h-3'
+  }
+
+  return cn(baseClasses, sizeClasses[props.size], props.class)
+})
+
+const progressClasses = computed(() => {
+  const baseClasses = 'h-full w-full flex-1 bg-primary transition-all'
+  
+  const variantClasses = {
+    default: 'bg-primary',
+    destructive: 'bg-destructive',
+    success: 'bg-green-500',
+    warning: 'bg-orange-500',
+    info: 'bg-blue-500'
+  }
+
+  return cn(baseClasses, variantClasses[props.variant], {
+    'animate-pulse': props.indeterminate,
+    'transition-all': !props.indeterminate
+  })
+})
+
+const labelClasses = computed(() => {
+  const baseClasses = 'text-sm font-medium'
+  
+  const variantClasses = {
+    default: 'text-foreground',
+    destructive: 'text-destructive',
+    success: 'text-green-600',
+    warning: 'text-orange-600',
+    info: 'text-blue-600'
+  }
+
+  return cn(baseClasses, variantClasses[props.variant])
+})
+</script>
+
+<template>
+  <div class="space-y-2">
+    <!-- Label -->
+    <div v-if="showLabel && (label || $slots.label)" class="flex items-center justify-between">
+      <div :class="labelClasses">
+        <slot name="label">{{ label }}</slot>
+      </div>
+      <div :class="labelClasses" v-if="!indeterminate">
+        {{ Math.round(percentage) }}%
+      </div>
+    </div>
+
+    <!-- Progress container -->
+    <div :class="containerClasses" role="progressbar" :aria-valuenow="value" :aria-valuemax="max">
+      <div
+        :class="progressClasses"
+        :style="{
+          width: indeterminate ? '100%' : `${percentage}%`,
+          animation: indeterminate ? 'indeterminate 2s ease-in-out infinite' : undefined
+        }"
+      />
+    </div>
+
+    <!-- Value display -->
+    <div v-if="$slots.value" class="text-sm text-muted-foreground">
+      <slot name="value" :value="value" :percentage="percentage" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+</style>

package/src/components/NS/progress/NSProgressBar.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  value?: number
+  max?: number
+  variant?: 'default' | 'destructive' | 'success' | 'warning' | 'info'
+  size?: 'default' | 'sm' | 'lg'
+  showLabel?: boolean
+  label?: string
+  indeterminate?: boolean
+  animated?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  max: 100,
+  variant: 'default',
+  size: 'default',
+  showLabel: false,
+  indeterminate: false,
+  animated: true,
+})
+
+const percentage = computed(() => {
+  if (props.indeterminate) return 0
+  return Math.min(Math.max((props.value || 0) / props.max * 100, 0), 100)
+})
+
+const containerClasses = computed(() => {
+  const baseClasses = 'relative w-full bg-secondary overflow-hidden rounded-md'
+  
+  const sizeClasses = {
+    default: 'h-4',
+    sm: 'h-3',
+    lg: 'h-6'
+  }
+
+  return cn(baseClasses, sizeClasses[props.size], props.class)
+})
+
+const barClasses = computed(() => {
+  const baseClasses = 'h-full flex-1 transition-all'
+  
+  const variantClasses = {
+    default: 'bg-primary',
+    destructive: 'bg-destructive',
+    success: 'bg-green-500',
+    warning: 'bg-orange-500',
+    info: 'bg-blue-500'
+  }
+
+  return cn(baseClasses, variantClasses[props.variant], {
+    'transition-all': props.animated && !props.indeterminate,
+    'animate-pulse': props.indeterminate,
+    'bg-gradient-to-r from-primary/80 to-primary': props.animated && props.variant === 'default',
+    'bg-gradient-to-r from-destructive/80 to-destructive': props.animated && props.variant === 'destructive',
+    'bg-gradient-to-r from-green-400 to-green-500': props.animated && props.variant === 'success',
+    'bg-gradient-to-r from-orange-400 to-orange-500': props.animated && props.variant === 'warning',
+    'bg-gradient-to-r from-blue-400 to-blue-500': props.animated && props.variant === 'info',
+  })
+})
+
+const labelClasses = computed(() => {
+  const baseClasses = 'text-sm font-medium'
+  
+  const variantClasses = {
+    default: 'text-foreground',
+    destructive: 'text-destructive',
+    success: 'text-green-600',
+    warning: 'text-orange-600',
+    info: 'text-blue-600'
+  }
+
+  return cn(baseClasses, variantClasses[props.variant])
+})
+</script>
+
+<template>
+  <div class="space-y-2">
+    <!-- Label -->
+    <div v-if="showLabel && (label || $slots.label)" class="flex items-center justify-between">
+      <div :class="labelClasses">
+        <slot name="label">{{ label }}</slot>
+      </div>
+      <div :class="labelClasses" v-if="!indeterminate">
+        {{ Math.round(percentage) }}%
+      </div>
+    </div>
+
+    <!-- Progress bar container -->
+    <div :class="containerClasses" role="progressbar" :aria-valuenow="value" :aria-valuemax="max">
+      <div
+        :class="barClasses"
+        :style="{
+          width: indeterminate ? '100%' : `${percentage}%`,
+          animation: indeterminate ? 'indeterminate 2s ease-in-out infinite' : undefined
+        }"
+      >
+        <!-- Animated shimmer effect -->
+        <div 
+          v-if="animated && !indeterminate" 
+          class="h-full w-full bg-gradient-to-r from-transparent via-white/20 to-transparent animate-[shimmer_2s_ease-in-out_infinite]"
+        />
+      </div>
+    </div>
+
+    <!-- Value display -->
+    <div v-if="$slots.value" class="text-sm text-muted-foreground">
+      <slot name="value" :value="value" :percentage="percentage" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+</style>

package/src/components/NS/slider/NSByteSlider.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  modelValue?: number
+  defaultValue?: number
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  showLabel?: boolean
+  label?: string
+  showValue?: boolean
+  formatBytes?: (bytes: number) => string
+  showByteUnits?: boolean
+  customUnits?: string[]
+  class?: string
+  trackClass?: string
+  thumbClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  min: 0,
+  max: 1024, // 1GB default
+  step: 1,
+  showLabel: false,
+  showValue: true,
+  showByteUnits: true,
+  customUnits: () => ['B', 'KB', 'MB', 'GB', 'TB'],
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+const value = computed({
+  get: () => props.modelValue ?? props.defaultValue ?? 0,
+  set: (value: number) => {
+    emit('update:modelValue', value)
+  }
+})
+
+const formatBytesDefault = (bytes: number): string => {
+  if (bytes === 0) return '0 B'
+  
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  
+  const units = props.customUnits
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + units[i]
+}
+
+const displayValue = computed(() => {
+  if (props.showByteUnits && props.formatBytes) {
+    return props.formatBytes(value.value)
+  } else if (props.showByteUnits) {
+    return formatBytesDefault(value.value)
+  } else {
+    return value.value.toString()
+  }
+})
+
+const containerClasses = computed(() => {
+  return cn('relative', props.class)
+})
+
+const rootClasses = computed(() => {
+  return cn('relative flex w-full touch-none select-none items-center flex-col')
+})
+
+const trackClasses = computed(() => {
+  return cn('relative h-2 w-full grow overflow-hidden rounded-full bg-secondary', props.trackClass)
+})
+
+const rangeClasses = computed(() => {
+  return cn('absolute h-full bg-primary')
+})
+
+const thumbClasses = computed(() => {
+  return cn('block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', props.thumbClass)
+})
+
+const labelClasses = computed(() => {
+  return 'text-sm font-medium text-foreground'
+})
+
+const valueClasses = computed(() => {
+  return 'text-sm font-mono text-muted-foreground'
+})
+
+// Calculate optimal decimal places based on range
+const decimals = computed(() => {
+  const range = props.max - props.min
+  if (range >= 1024 * 1024) return 1 // GB+
+  if (range >= 1024) return 0 // MB+
+  return 0 // KB and below
+})
+</script>
+
+<template>
+  <div :class="containerClasses">
+    <!-- Label -->
+    <div 
+      v-if="showLabel && (label || $slots.label)" 
+      class="flex items-center justify-between mb-2"
+    >
+      <div :class="labelClasses">
+        <slot name="label">{{ label }}</slot>
+      </div>
+      <div v-if="showValue" :class="valueClasses">
+        {{ displayValue }}
+      </div>
+    </div>
+
+    <!-- Slider -->
+    <SliderRoot
+      :class="rootClasses"
+      v-model="value"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disabled="disabled"
+    >
+      <SliderTrack :class="trackClasses">
+        <SliderRange :class="rangeClasses" />
+      </SliderTrack>
+      <SliderThumb :class="thumbClasses" />
+    </SliderRoot>
+
+    <!-- Scale markers for byte units -->
+    <div class="relative mt-2 flex justify-between text-xs text-muted-foreground">
+      <span v-if="showByteUnits">{{ formatBytes(min) }}</span>
+      <span v-if="showByteUnits">{{ formatBytes(max) }}</span>
+    </div>
+
+    <!-- Custom value display -->
+    <div v-if="$slots.value" class="mt-2">
+      <slot name="value" :value="value" :display-value="displayValue" />
+    </div>
+  </div>
+</template>