@nexxtmove/ui 0.1.44 → 0.1.46

package/package.json

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

package/src/components/DropdownButton/DropdownButton.vue

@@ -46,7 +46,26 @@ const emit = defineEmits<{
 
 const isOpen = ref(false)
 const wrapperRef = ref<HTMLElement | null>(null)
-const checkedItems = ref<Record<string, boolean>>({})
+const flatItems = computed<NexxtDropdownButton[]>(() =>
+  options.length > 0 && 'items' in options[0]
+    ? (options as NexxtDropdownButtonGroup[]).flatMap((g) => g.items)
+    : (options as NexxtDropdownButton[]),
+)
+
+const toggledItems = ref<Record<string, boolean>>({})
+
+const checkedItems = computed(() =>
+  Object.fromEntries(
+    flatItems.value
+      .filter((item) => item.checkbox)
+      .map((item) => [
+        item.label,
+        item.label in toggledItems.value
+          ? toggledItems.value[item.label]
+          : (item.selected ?? false),
+      ]),
+  ),
+)
 
 const handleAction = (action: string | (() => void)) => {
   if (typeof action === 'function') {
@@ -63,7 +82,7 @@ const toggleDropdown = () => {
 const handleOptionClick = (option: NexxtDropdownButton) => {
   if (option.checkbox) {
     const newValue = !checkedItems.value[option.label]
-    checkedItems.value[option.label] = newValue
+    toggledItems.value[option.label] = newValue
     emit('checkboxChange', option.label, newValue)
   } else {
     isOpen.value = false
@@ -181,8 +200,8 @@ const transitionClasses = computed(() => {
         <template v-for="(group, groupIndex) in groupedOptions" :key="group.title || groupIndex">
           <div
             v-if="group.title"
-            class="border-b border-gray-100 px-4 py-1.5 extra-small-normal text-gray-600"
-            :class="groupIndex > 0 ? 'mt-1 border-t pt-2' : ''"
+            class="border-b border-gray-100 px-6 py-3 extra-small-normal text-gray-600"
+            :class="groupIndex > 0 ? 'border-t pt-2' : ''"
           >
             {{ group.title }}
           </div>
@@ -191,7 +210,7 @@ const transitionClasses = computed(() => {
             :key="option.label"
             :role="option.checkbox ? 'menuitemcheckbox' : 'menuitem'"
             :aria-checked="option.checkbox ? (checkedItems[option.label] ?? false) : undefined"
-            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"
+            class="flex w-full min-w-42 cursor-pointer items-center gap-2 px-6 py-3 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"
             :class="!option.checkbox && option.selected ? 'bg-cornflower-blue-100' : ''"
             @click="handleOptionClick(option)"
           >

package/src/components/Table/Table.vue

@@ -113,148 +113,145 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
 
 <template>
   <div class="flex flex-col gap-3">
-    <div class="overflow-x-auto">
-      <div
-        role="grid"
-        :aria-colcount="columns.length + (selectable ? 1 : 0)"
-        :aria-rowcount="rows.length + 1"
-        class="min-w-full"
-      >
-        <div class="sticky top-0 z-10 mb-0.5">
-          <div v-if="$slots.toolbar">
-            <slot name="toolbar" />
+    <div
+      role="grid"
+      :aria-colcount="columns.length + (selectable ? 1 : 0)"
+      :aria-rowcount="rows.length + 1"
+      class="min-w-full"
+    >
+      <div class="sticky top-0 z-10 mb-0.5">
+        <div v-if="$slots.toolbar">
+          <slot name="toolbar" />
+        </div>
+        <div
+          class="grid rounded-md bg-gray-50"
+          :style="{ gridTemplateColumns: gridTemplate }"
+          role="row"
+          aria-rowindex="1"
+        >
+          <div
+            v-if="selectable"
+            class="flex items-center justify-center px-2 py-3"
+            role="columnheader"
+            aria-colindex="1"
+          >
+            <Checkbox
+              :model-value="allSelected"
+              :indeterminate="someSelected"
+              aria-label="Select all rows"
+              @update:model-value="toggleAll"
+            />
           </div>
           <div
-            class="grid rounded-md bg-gray-50"
-            :style="{ gridTemplateColumns: gridTemplate }"
-            role="row"
-            aria-rowindex="1"
+            v-for="(column, colIndex) in columns"
+            :key="column.key"
+            class="flex items-center gap-1.5 px-4 py-3 heading-4 text-slate-700"
+            :class="{
+              'cursor-pointer select-none hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:outline-none focus-visible:ring-inset':
+                column.sortable,
+            }"
+            role="columnheader"
+            :aria-colindex="colIndex + (selectable ? 2 : 1)"
+            :aria-sort="
+              column.sortable
+                ? sortKey === column.key
+                  ? sortDirection === 'asc'
+                    ? 'ascending'
+                    : 'descending'
+                  : 'none'
+                : undefined
+            "
+            :tabindex="column.sortable ? 0 : undefined"
+            @click="handleSort(column)"
+            @keydown.enter.prevent="handleSort(column)"
+            @keydown.space.prevent="handleSort(column)"
           >
-            <div
-              v-if="selectable"
-              class="flex items-center justify-center px-2 py-3"
-              role="columnheader"
-              aria-colindex="1"
-            >
-              <Checkbox
-                :model-value="allSelected"
-                :indeterminate="someSelected"
-                aria-label="Select all rows"
-                @update:model-value="toggleAll"
-              />
-            </div>
-            <div
-              v-for="(column, colIndex) in columns"
-              :key="column.key"
-              class="flex items-center gap-1.5 px-4 py-3 heading-4 text-slate-700"
-              :class="{
-                'cursor-pointer select-none hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:outline-none focus-visible:ring-inset':
-                  column.sortable,
-              }"
-              role="columnheader"
-              :aria-colindex="colIndex + (selectable ? 2 : 1)"
-              :aria-sort="
-                column.sortable
-                  ? sortKey === column.key
-                    ? sortDirection === 'asc'
-                      ? 'ascending'
-                      : 'descending'
-                    : 'none'
-                  : undefined
+            <span :class="sortKey === column.key ? 'text-cornflower-blue-600' : ''">{{
+              column.label
+            }}</span>
+            <Icon
+              v-if="column.sortable"
+              :name="
+                sortKey === column.key
+                  ? sortDirection === 'asc'
+                    ? 'angle-down'
+                    : 'angle-up'
+                  : 'angles-up-down'
               "
-              :tabindex="column.sortable ? 0 : undefined"
-              @click="handleSort(column)"
-              @keydown.enter.prevent="handleSort(column)"
-              @keydown.space.prevent="handleSort(column)"
-            >
-              <span :class="sortKey === column.key ? 'text-cornflower-blue-600' : ''">{{
-                column.label
-              }}</span>
-              <Icon
-                v-if="column.sortable"
-                :name="
-                  sortKey === column.key
-                    ? sortDirection === 'asc'
-                      ? 'angle-down'
-                      : 'angle-up'
-                    : 'angles-up-down'
-                "
-                class="shrink-0 text-xs"
-                :class="sortKey === column.key ? 'text-cornflower-blue-600' : 'text-slate-400'"
-              />
-            </div>
+              class="shrink-0 text-xs"
+              :class="sortKey === column.key ? 'text-cornflower-blue-600' : 'text-slate-400'"
+            />
           </div>
         </div>
+      </div>
 
-        <div role="rowgroup" class="relative">
+      <div role="rowgroup" class="relative">
+        <div
+          v-for="(row, rowIndex) in rows"
+          :key="rowIndex"
+          ref="rowRefs"
+          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: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 ? isRowSelected(row) : undefined"
+          tabindex="0"
+          @click="handleRowClick($event, rowIndex)"
+          @keydown="handleRowKeydown($event, rowIndex)"
+        >
           <div
-            v-for="(row, rowIndex) in rows"
-            :key="rowIndex"
-            ref="rowRefs"
-            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: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 ? isRowSelected(row) : undefined"
-            tabindex="0"
-            @click="handleRowClick($event, rowIndex)"
-            @keydown="handleRowKeydown($event, rowIndex)"
+            v-if="selectable"
+            class="flex items-center justify-center px-2 py-4"
+            role="gridcell"
+            :aria-colindex="1"
           >
-            <div
-              v-if="selectable"
-              class="flex items-center justify-center px-2 py-4"
-              role="gridcell"
-              :aria-colindex="1"
-            >
-              <Checkbox
-                :model-value="isRowSelected(row)"
-                :aria-label="`Select row ${rowIndex + 1}`"
-                @update:model-value="toggleRow(row)"
-              />
-            </div>
-            <div
-              v-for="(column, colIndex) in columns"
-              :key="column.key"
-              class="flex items-center truncate px-4 py-4 extra-small-normal text-slate-700"
-              role="gridcell"
-              :aria-colindex="colIndex + (selectable ? 2 : 1)"
-            >
-              <slot :name="cellSlotName(column.key)" :row="row" :value="rowValue(row, column.key)">
-                {{ rowValue(row, column.key) }}
-              </slot>
-            </div>
+            <Checkbox
+              :model-value="isRowSelected(row)"
+              :aria-label="`Select row ${rowIndex + 1}`"
+              @update:model-value="toggleRow(row)"
+            />
           </div>
-
-          <div v-if="!rows.length" class="px-4 py-8 text-center text-sm text-slate-400" role="row">
-            <slot name="empty">Geen data beschikbaar</slot>
+          <div
+            v-for="(column, colIndex) in columns"
+            :key="column.key"
+            class="flex items-center truncate px-4 py-4 extra-small-normal text-slate-700"
+            role="gridcell"
+            :aria-colindex="colIndex + (selectable ? 2 : 1)"
+          >
+            <slot :name="cellSlotName(column.key)" :row="row" :value="rowValue(row, column.key)">
+              {{ rowValue(row, column.key) }}
+            </slot>
           </div>
+        </div>
 
-          <Transition
-            enter-active-class="transition-opacity duration-200"
-            leave-active-class="transition-opacity duration-200"
-            enter-from-class="opacity-0"
-            leave-to-class="opacity-0"
-          >
-            <div
-              v-if="loading"
-              data-testid="loading-overlay"
-              class="absolute inset-0 flex items-center justify-center rounded-md bg-white/40 backdrop-blur-sm"
-            >
-              <slot name="loading"
-                ><Icon name="spinner-third" class="fa-spin text-3xl text-purple-500"
-              /></slot>
-            </div>
-          </Transition>
+        <div v-if="!rows.length" class="px-4 py-8 text-center text-sm text-slate-400" role="row">
+          <slot name="empty">Geen data beschikbaar</slot>
         </div>
+
+        <Transition
+          enter-active-class="transition-opacity duration-200"
+          leave-active-class="transition-opacity duration-200"
+          enter-from-class="opacity-0"
+          leave-to-class="opacity-0"
+        >
+          <div
+            v-if="loading"
+            data-testid="loading-overlay"
+            class="absolute inset-0 flex items-center justify-center rounded-md bg-white/40 backdrop-blur-sm"
+          >
+            <slot name="loading"
+              ><Icon name="spinner-third" class="fa-spin text-3xl text-purple-500"
+            /></slot>
+          </div>
+        </Transition>
       </div>
     </div>
   </div>

package/tailwind/nexxtmove.tailwind.components.css

@@ -117,6 +117,10 @@
     @apply bg-social-media-template-info-bg;
   }
 
+  .card {
+    @apply border-card-border border border-solid;
+  }
+
   .info-block {
     @apply p-(--info-block-padding);
   }

package/tailwind/nexxtmove.tailwind.theme.css

@@ -159,6 +159,7 @@
   --color-progress-bar-border: var(--color-gray-200);
   --color-header-border-bottom: var(--color-gray-200);
   --color-social-media-template-info-bg: var(--color-cornflower-blue-500);
+  --color-card-border: var(--color-gray-200);
   --text-xs: 0.75rem;
   --text-base: 1rem;
   --text-lg: 1.125rem;
@@ -220,12 +221,13 @@
   --button-padding-y: var(--spacing-2);
   --button-padding-link-x: var(--spacing-0\.5);
   --button-padding-link-y: var(--spacing-0\.5);
-  --button-gap: var(--spacing-1);
+  --button-gap: var(--spacing-2);
   --button-border-radius: var(--radius-lg);
   --header-height: var(--spacing-24);
   --header-padding-x: var(--spacing-10);
   --header-gap: var(--spacing-6);
   --info-block-padding: var(--spacing-1);
+  --card-border-radius: var(--radius-lg);
   --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-serif: 'Playfair Display', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;