@nexxtmove/ui 0.1.65 → 0.1.67

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.65",
+  "version": "0.1.67",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/ProgressBar/ProgressBar.vue

@@ -26,10 +26,19 @@ const {
 
 const isPercentage = computed(() => variant === 'percentage')
 
-const clampedStep = computed(() => Math.min(Math.max(0, currentStep), Math.max(0, steps - 1)))
+const clampedStep = computed(() => {
+  if (isPercentage.value) return Math.max(0, currentStep)
+  return Math.min(Math.max(0, currentStep), Math.max(0, steps - 1))
+})
+
 const displayStep = computed(() => (steps > 0 ? clampedStep.value + 1 : 0))
 
 const percentage = computed(() => {
+  if (isPercentage.value) {
+    if (steps <= 0) return 0
+    return Math.min(Math.round((clampedStep.value / steps) * 100), 100)
+  }
+
   if (steps <= 1) return steps === 1 ? 100 : 0
   return (clampedStep.value / (steps - 1)) * 100
 })

package/src/components/Table/Table.vue

@@ -18,6 +18,8 @@ export interface NexxtTableProps<
   columns: TableColumn<TKey>[]
   rows: TRow[]
   selectable?: boolean
+  selectionMode?: 'single' | 'multiple'
+  selectOnRowClick?: boolean
   loading?: boolean
 }
 
@@ -31,7 +33,9 @@ defineSlots<
   }
 >()
 
-const props = defineProps<NexxtTableProps<TKey, TRow>>()
+const props = withDefaults(defineProps<NexxtTableProps<TKey, TRow>>(), {
+  selectionMode: 'multiple',
+})
 const emit = defineEmits<{
   'row-click': [row: TRow]
 }>()
@@ -52,10 +56,15 @@ const someSelected = computed(
 const isRowSelected = (row: TRow) => selected.value.includes(row)
 
 const toggleAll = () => {
+  if (props.selectionMode === 'single') return
   selected.value = allSelected.value ? [] : [...props.rows]
 }
 
 const toggleRow = (row: TRow) => {
+  if (props.selectionMode === 'single') {
+    selected.value = isRowSelected(row) ? [] : [row]
+    return
+  }
   selected.value = isRowSelected(row)
     ? selected.value.filter((r) => r !== row)
     : [...selected.value, row]
@@ -84,7 +93,12 @@ const handleRowClick = (event: MouseEvent, rowIndex: number) => {
     (el) => el.tagName && INTERACTIVE.includes(el.tagName.toLowerCase()),
   )
   if (isInteractive) return
-  emit('row-click', props.rows[rowIndex])
+
+  if (props.selectable && props.selectOnRowClick) {
+    toggleRow(props.rows[rowIndex])
+  } else {
+    emit('row-click', props.rows[rowIndex])
+  }
 }
 
 const getRowRoundedClass = (rowIndex: number) => {
@@ -136,6 +150,7 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
             aria-colindex="1"
           >
             <Checkbox
+              v-if="selectionMode === 'multiple'"
               :model-value="allSelected"
               :indeterminate="someSelected"
               aria-label="Select all rows"
@@ -193,6 +208,7 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
           class="grid border-b border-gray-100 transition-colors duration-150 hover:bg-cornflower-blue-50 focus-visible:bg-slate-50 focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:outline-none focus-visible:ring-inset"
           :class="[
             {
+              'cursor-pointer': selectable && selectOnRowClick,
               'hover:rounded-md': !isRowSelected(rows[rowIndex]),
               'border-white/80 bg-cornflower-blue-100': selectable && isRowSelected(rows[rowIndex]),
               'border-transparent': selectable && isRowSelected(rows[rowIndex + 1]),