@nexxtmove/ui 0.1.35 → 0.1.37

package/package.json

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

package/src/components/DropdownButton/DropdownButton.vue

@@ -147,7 +147,7 @@ const transitionClasses = computed(() => {
           v-for="option in options"
           :key="option.label"
           role="menuitem"
-          class="flex w-full min-w-42 cursor-pointer items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none"
+          class="flex w-full min-w-42 cursor-pointer items-center gap-2 px-4 py-2 text-left text-sm whitespace-nowrap text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none"
           @click="handleOptionClick(option.action)"
         >
           <NexxtIcon v-if="option.icon" :name="option.icon" aria-hidden="true" />

package/src/components/Pagination/Pagination.vue

@@ -46,6 +46,7 @@ const {
       :class="{ 'pointer-events-none opacity-50': disabled }"
     >
       <PaginationFirst
+        v-if="items.some((item) => item.type === 'ellipsis')"
         class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
         :disabled="disabled"
       >
@@ -83,6 +84,7 @@ const {
         <NexxtIcon name="chevron-right" />
       </PaginationNext>
       <PaginationLast
+        v-if="items.some((item) => item.type === 'ellipsis')"
         class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
         :disabled="disabled"
       >

package/src/components/Table/Table.vue

@@ -13,25 +13,23 @@ export interface TableColumn<K extends string = string> {
 export interface NexxtTableProps<TKey extends string = string> {
   columns: TableColumn<TKey>[]
   rows: Record<TKey, unknown>[]
-  sortKey?: TKey
-  sortDirection?: 'asc' | 'desc'
   selectable?: boolean
-  modelValue?: number[]
 }
 
 const INTERACTIVE = ['a', 'button', 'input', 'select', 'textarea', 'label']
 
 defineOptions({ name: 'NexxtTable' })
 
-const props = withDefaults(defineProps<NexxtTableProps<TKey>>(), {
-  sortDirection: 'asc',
-})
+const props = defineProps<NexxtTableProps<TKey>>()
 const emit = defineEmits<{
-  sort: [key: string, direction: 'asc' | 'desc']
-  'update:modelValue': [selected: number[]]
+  'row-click': [row: Record<TKey, unknown>]
 }>()
 
-const selected = computed(() => props.modelValue ?? [])
+const selected = defineModel<Record<TKey, unknown>[]>({ default: () => [] })
+const sortKey = defineModel<TKey>('sortKey')
+const sortDirection = defineModel<'asc' | 'desc'>('sortDirection', { default: 'asc' })
+
+const rowRefs = ref<HTMLElement[]>([])
 
 const allSelected = computed(
   () => props.rows.length > 0 && selected.value.length === props.rows.length,
@@ -40,15 +38,16 @@ const someSelected = computed(
   () => selected.value.length > 0 && selected.value.length < props.rows.length,
 )
 
+const isRowSelected = (row: Record<TKey, unknown>) => selected.value.includes(row)
+
 const toggleAll = () => {
-  emit('update:modelValue', allSelected.value ? [] : props.rows.map((_, i) => i))
+  selected.value = allSelected.value ? [] : [...props.rows]
 }
 
-const toggleRow = (index: number) => {
-  const next = selected.value.includes(index)
-    ? selected.value.filter((i) => i !== index)
-    : [...selected.value, index]
-  emit('update:modelValue', next)
+const toggleRow = (row: Record<TKey, unknown>) => {
+  selected.value = isRowSelected(row)
+    ? selected.value.filter((r) => r !== row)
+    : [...selected.value, row]
 }
 
 const columnTemplate = computed(() =>
@@ -61,32 +60,30 @@ const gridTemplate = computed(() =>
 
 const handleSort = (column: TableColumn) => {
   if (!column.sortable) return
-  const newDirection =
-    props.sortKey === column.key && props.sortDirection === 'asc' ? 'desc' : 'asc'
-  emit('sort', column.key, newDirection)
+  sortDirection.value =
+    sortKey.value === column.key && sortDirection.value === 'asc' ? 'desc' : 'asc'
+  sortKey.value = column.key as TKey
 }
 
 const handleRowClick = (event: MouseEvent, rowIndex: number) => {
-  if (!props.selectable) return
   const path = event.composedPath() as Element[]
   const isInteractive = path.some(
     (el) => el.tagName && INTERACTIVE.includes(el.tagName.toLowerCase()),
   )
-  if (!isInteractive) toggleRow(rowIndex)
+  if (isInteractive) return
+  emit('row-click', props.rows[rowIndex])
 }
 
 const getRowRoundedClass = (rowIndex: number) => {
-  if (!props.selectable || !selected.value.includes(rowIndex)) return ''
-  const prevSelected = selected.value.includes(rowIndex - 1)
-  const nextSelected = selected.value.includes(rowIndex + 1)
+  if (!props.selectable || !isRowSelected(props.rows[rowIndex])) return ''
+  const prevSelected = rowIndex > 0 && isRowSelected(props.rows[rowIndex - 1])
+  const nextSelected = rowIndex < props.rows.length - 1 && isRowSelected(props.rows[rowIndex + 1])
   if (!prevSelected && !nextSelected) return 'rounded-md'
   if (!prevSelected) return 'rounded-t-md'
   if (!nextSelected) return 'rounded-b-md'
   return ''
 }
 
-const rowRefs = ref<HTMLElement[]>([])
-
 const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
   if (event.key === 'ArrowDown') {
     event.preventDefault()
@@ -176,18 +173,20 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
             v-for="(row, rowIndex) in rows"
             :key="rowIndex"
             ref="rowRefs"
-            class="grid border-b border-gray-100 transition-colors duration-150 focus-visible:bg-slate-50 focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:outline-none focus-visible:ring-inset"
+            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="[
               {
-                'hover:bg-slate-50': selectable,
-                'border-white/80 bg-cornflower-blue-50': selectable && selected.includes(rowIndex),
+                'hover:rounded-md': !isRowSelected(rows[rowIndex]),
+                'border-white/80 bg-cornflower-blue-100':
+                  selectable && isRowSelected(rows[rowIndex]),
+                'border-transparent': selectable && isRowSelected(rows[rowIndex + 1]),
               },
               getRowRoundedClass(rowIndex),
             ]"
             :style="{ gridTemplateColumns: gridTemplate }"
             role="row"
             :aria-rowindex="rowIndex + 2"
-            :aria-selected="selectable ? selected.includes(rowIndex) : undefined"
+            :aria-selected="selectable ? isRowSelected(row) : undefined"
             tabindex="0"
             @click="handleRowClick($event, rowIndex)"
             @keydown="handleRowKeydown($event, rowIndex)"
@@ -199,9 +198,9 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
               :aria-colindex="1"
             >
               <Checkbox
-                :model-value="selected.includes(rowIndex)"
+                :model-value="isRowSelected(row)"
                 :aria-label="`Select row ${rowIndex + 1}`"
-                @update:model-value="toggleRow(rowIndex)"
+                @update:model-value="toggleRow(row)"
               />
             </div>
             <div

package/src/components.json

@@ -23,4 +23,4 @@
   "NexxtTimelineEvent": "components/TimelineEvent/TimelineEvent.vue",
   "NexxtTimelinePhaseblock": "components/TimelinePhaseblock/TimelinePhaseblock.vue",
   "NexxtTooltip": "components/Tooltip/Tooltip.vue"
-}
+}