@nexxtmove/ui 0.1.46 → 0.1.48

package/dist/nuxt.js

@@ -1,31 +1,32 @@
 import { defineNuxtModule as c, addComponent as s, addTemplate as a } from "@nuxt/kit";
-const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar/Avatar.vue", x = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", r = "components/CustomerJourneyTile/CustomerJourneyTile.vue", d = "components/DatePicker/DatePicker.vue", v = "components/DropdownButton/DropdownButton.vue", N = "components/Header/Header.vue", T = "components/Icon/Icon.vue", C = "components/InfoBlock/InfoBlock.vue", S = "components/InputField/InputField.vue", b = "components/Modal/Modal.vue", f = "components/Pagination/Pagination.vue", h = "components/ProgressBar/ProgressBar.vue", M = "components/SocialIcons/SocialIcons.vue", P = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", k = "components/SocialMediaTemplate/SocialMediaTemplate.vue", B = "components/SocialMediaType/SocialMediaType.vue", I = "components/StepperHeader/StepperHeader.vue", g = "components/Table/Table.vue", y = "components/TimelineEvent/TimelineEvent.vue", A = "components/TimelinePhaseblock/TimelinePhaseblock.vue", D = "components/Tooltip/Tooltip.vue", H = {
+const i = "components/AnimatedNumber/AnimatedNumber.vue", x = "components/Avatar/Avatar.vue", m = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", r = "components/Combobox/Combobox.vue", d = "components/CustomerJourneyTile/CustomerJourneyTile.vue", v = "components/DatePicker/DatePicker.vue", N = "components/DropdownButton/DropdownButton.vue", T = "components/Header/Header.vue", C = "components/Icon/Icon.vue", b = "components/InfoBlock/InfoBlock.vue", S = "components/InputField/InputField.vue", f = "components/Modal/Modal.vue", h = "components/Pagination/Pagination.vue", M = "components/ProgressBar/ProgressBar.vue", P = "components/SocialIcons/SocialIcons.vue", k = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", B = "components/SocialMediaTemplate/SocialMediaTemplate.vue", I = "components/SocialMediaType/SocialMediaType.vue", g = "components/StepperHeader/StepperHeader.vue", y = "components/Table/Table.vue", A = "components/TimelineEvent/TimelineEvent.vue", D = "components/TimelinePhaseblock/TimelinePhaseblock.vue", H = "components/Tooltip/Tooltip.vue", w = {
   NexxtAnimatedNumber: i,
-  NexxtAvatar: m,
-  NexxtButton: x,
+  NexxtAvatar: x,
+  NexxtButton: m,
   NexxtCalendar: u,
   NexxtCheckbox: p,
   NexxtChip: l,
-  NexxtCustomerJourneyTile: r,
-  NexxtDatePicker: d,
-  NexxtDropdownButton: v,
-  NexxtHeader: N,
-  NexxtIcon: T,
-  NexxtInfoBlock: C,
+  NexxtCombobox: r,
+  NexxtCustomerJourneyTile: d,
+  NexxtDatePicker: v,
+  NexxtDropdownButton: N,
+  NexxtHeader: T,
+  NexxtIcon: C,
+  NexxtInfoBlock: b,
   NexxtInputField: S,
-  NexxtModal: b,
-  NexxtPagination: f,
-  NexxtProgressBar: h,
-  NexxtSocialIcons: M,
-  NexxtSocialMediaCustomTemplate: P,
-  NexxtSocialMediaTemplate: k,
-  NexxtSocialMediaType: B,
-  NexxtStepperHeader: I,
-  NexxtTable: g,
-  NexxtTimelineEvent: y,
-  NexxtTimelinePhaseblock: A,
-  NexxtTooltip: D
-}, E = c({
+  NexxtModal: f,
+  NexxtPagination: h,
+  NexxtProgressBar: M,
+  NexxtSocialIcons: P,
+  NexxtSocialMediaCustomTemplate: k,
+  NexxtSocialMediaTemplate: B,
+  NexxtSocialMediaType: I,
+  NexxtStepperHeader: g,
+  NexxtTable: y,
+  NexxtTimelineEvent: A,
+  NexxtTimelinePhaseblock: D,
+  NexxtTooltip: H
+}, F = c({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -37,7 +38,7 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(H))
+    for (const [t, n] of Object.entries(w))
       s({
         name: t,
         export: "default",
@@ -56,5 +57,5 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar
   }
 });
 export {
-  E as default
+  F as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.46",
+  "version": "0.1.48",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -34,12 +34,12 @@
     "@eslint/js": "^9.39.2",
     "@nuxt/kit": "^4.3.1",
     "@nuxt/schema": "^4.3.1",
-    "@storybook/addon-a11y": "^10.3.3",
-    "@storybook/addon-designs": "^11.1.2",
-    "@storybook/addon-docs": "^10.3.3",
-    "@storybook/addon-vitest": "^10.3.3",
-    "@storybook/builder-vite": "^10.3.3",
-    "@storybook/vue3-vite": "^10.3.3",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-designs": "^11.1.3",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-vitest": "^10.3.5",
+    "@storybook/builder-vite": "^10.3.5",
+    "@storybook/vue3-vite": "^10.3.5",
     "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^25.0.3",
     "@types/react": "^19.2.8",
@@ -53,7 +53,7 @@
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-storybook": "10.3.3",
+    "eslint-plugin-storybook": "10.3.5",
     "eslint-plugin-vue": "^10.6.2",
     "globals": "^17.0.0",
     "jsdom": "^28.1.0",
@@ -62,7 +62,7 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "remark-frontmatter": "^5.0.0",
-    "storybook": "^10.3.3",
+    "storybook": "^10.3.5",
     "typescript-eslint": "^8.52.0",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",

package/src/components/Combobox/Combobox.vue

@@ -0,0 +1,182 @@
+<script lang="ts" setup>
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import NexxtButton from '../Button/Button.vue'
+import NexxtChip from '../Chip/Chip.vue'
+import NexxtIcon from '../Icon/Icon.vue'
+import NexxtInputField from '../InputField/InputField.vue'
+
+interface NexxtComboboxProps {
+  variant?: InstanceType<typeof NexxtButton>['variant']
+  icon?: InstanceType<typeof NexxtIcon>['name']
+  placeholder?: string
+  placement?: 'left' | 'right'
+  options: (string | { label: string; value: string | number })[]
+}
+
+const props = defineProps<NexxtComboboxProps>()
+
+const {
+  variant = 'secondary',
+  placement = 'right',
+  icon = 'tag',
+  placeholder = 'Zoeken...',
+} = props
+
+const selected = defineModel<(string | number)[]>({ default: [] })
+
+const isOpen = ref(false)
+const inputFieldRef = ref<InstanceType<typeof NexxtInputField> | null>(null)
+const wrapperRef = ref<HTMLElement | null>(null)
+const search = ref('')
+
+const getLabel = (option: string | { label: string; value: string | number }) =>
+  typeof option === 'string' ? option : option.label
+
+const getValue = (option: string | { label: string; value: string | number }) =>
+  typeof option === 'string' ? option : option.value
+
+const selectedLabels = computed(() =>
+  selected.value.map((val) => {
+    const match = props.options.find((o) => getValue(o) === val)
+    return { value: val, label: match ? getLabel(match) : String(val) }
+  }),
+)
+
+const filteredOptions = computed(() => {
+  const q = search.value.toLowerCase()
+  return props.options
+    .filter((o) => !selected.value.includes(getValue(o)))
+    .filter((o) => getLabel(o).toLowerCase().includes(q))
+})
+
+const selectOption = (option: string | { label: string; value: string | number }) => {
+  selected.value = [...selected.value, getValue(option)]
+  search.value = ''
+}
+
+const removeSelected = (val: string | number) => {
+  selected.value = selected.value.filter((v) => v !== val)
+}
+
+watch(isOpen, async (open) => {
+  if (open) {
+    await nextTick()
+    inputFieldRef.value?.$el.querySelector('input')?.focus()
+  }
+})
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (wrapperRef.value && !wrapperRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && isOpen.value) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleClickOutside)
+  document.addEventListener('keydown', handleKeydown)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleClickOutside)
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+const transitionClasses = computed(() => {
+  const origin = placement === 'right' ? 'origin-top-right' : 'origin-top-left'
+  return {
+    enterActiveClass: `transition-all duration-200 ease-out ${origin}`,
+    leaveActiveClass: `transition-all duration-150 ease-in ${origin}`,
+    enterFromClass: 'opacity-0 scale-95 -translate-y-3',
+    leaveToClass: 'opacity-0 scale-95 -translate-y-3',
+    enterToClass: 'opacity-100 scale-100 translate-y-0',
+    leaveFromClass: 'opacity-100 scale-100 translate-y-0',
+  }
+})
+</script>
+
+<template>
+  <div ref="wrapperRef" class="relative">
+    <NexxtButton
+      :variant
+      :icon
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      @click="isOpen = !isOpen"
+    >
+      <span class="flex gap-2"><slot>Combobox</slot><NexxtIcon name="chevron-down" /> </span>
+    </NexxtButton>
+    <Transition v-bind="transitionClasses">
+      <div
+        v-if="isOpen"
+        class="absolute top-full z-10 mt-2.5 min-w-80 rounded-md border border-gray-200 bg-white whitespace-nowrap"
+        :class="placement === 'right' ? 'right-0' : 'left-0'"
+      >
+        <div class="p-2">
+          <NexxtInputField
+            ref="inputFieldRef"
+            v-model="search"
+            class="w-full"
+            :left-icon="icon"
+            :placeholder
+          />
+        </div>
+        <Transition
+          enter-active-class="transition-all duration-200 ease-out overflow-hidden"
+          enter-from-class="max-h-0 opacity-0"
+          enter-to-class="max-h-40 opacity-100"
+          leave-active-class="transition-all duration-150 ease-in overflow-hidden"
+          leave-from-class="max-h-40 opacity-100"
+          leave-to-class="max-h-0 opacity-0"
+        >
+          <TransitionGroup
+            v-if="selectedLabels.length > 0"
+            tag="div"
+            class="flex flex-wrap gap-1 border-b border-gray-200 p-2 pt-0"
+            enter-active-class="transition-all duration-150 ease-out"
+            enter-from-class="opacity-0 scale-75"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition-all duration-100 ease-in"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-75"
+          >
+            <button
+              v-for="item in selectedLabels"
+              :key="item.value"
+              class="origin-left cursor-pointer"
+              :aria-label="`Verwijder ${item.label}`"
+              @click="removeSelected(item.value)"
+            >
+              <NexxtChip variant="ghost">
+                {{ item.label }}
+                <span>
+                  <NexxtIcon name="xmark" class="text-xs" aria-hidden="true" />
+                </span>
+              </NexxtChip>
+            </button>
+          </TransitionGroup>
+        </Transition>
+        <ul
+          role="listbox"
+          aria-multiselectable="true"
+          class="max-h-56 overflow-y-auto [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-cornflower-blue-200 [&::-webkit-scrollbar-thumb:hover]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent"
+        >
+          <li
+            v-for="option in filteredOptions"
+            :key="getValue(option)"
+            role="option"
+            aria-selected="false"
+            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"
+            @click="selectOption(option)"
+          >
+            {{ getLabel(option) }}
+          </li>
+        </ul>
+      </div>
+    </Transition>
+  </div>
+</template>

package/src/components.json

@@ -5,6 +5,7 @@
   "NexxtCalendar": "components/Calendar/Calendar.vue",
   "NexxtCheckbox": "components/Checkbox/Checkbox.vue",
   "NexxtChip": "components/Chip/Chip.vue",
+  "NexxtCombobox": "components/Combobox/Combobox.vue",
   "NexxtCustomerJourneyTile": "components/CustomerJourneyTile/CustomerJourneyTile.vue",
   "NexxtDatePicker": "components/DatePicker/DatePicker.vue",
   "NexxtDropdownButton": "components/DropdownButton/DropdownButton.vue",

package/src/index.ts

@@ -5,6 +5,7 @@ export { default as NexxtButton } from './components/Button/Button.vue'
 export { default as NexxtCalendar } from './components/Calendar/Calendar.vue'
 export { default as NexxtCheckbox } from './components/Checkbox/Checkbox.vue'
 export { default as NexxtChip } from './components/Chip/Chip.vue'
+export { default as NexxtCombobox } from './components/Combobox/Combobox.vue'
 export { default as NexxtCustomerJourneyTile } from './components/CustomerJourneyTile/CustomerJourneyTile.vue'
 export { default as NexxtDatePicker } from './components/DatePicker/DatePicker.vue'
 export { default as NexxtDropdownButton } from './components/DropdownButton/DropdownButton.vue'

package/tailwind/nexxtmove.tailwind.components.css

@@ -117,8 +117,12 @@
     @apply bg-social-media-template-info-bg;
   }
 
+  .card-content {
+    @apply border-card-content-border px-(--card-content-padding-x) py-(--card-content-padding-y) border border-solid;
+  }
+
   .card {
-    @apply border-card-border border border-solid;
+    @apply bg-card-bg;
   }
 
   .info-block {

package/tailwind/nexxtmove.tailwind.theme.css

@@ -159,7 +159,8 @@
   --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);
+  --color-card-content-border: var(--color-gray-200);
+  --color-card-bg: var(--color-white);
   --text-xs: 0.75rem;
   --text-base: 1rem;
   --text-lg: 1.125rem;
@@ -228,6 +229,9 @@
   --header-gap: var(--spacing-6);
   --info-block-padding: var(--spacing-1);
   --card-border-radius: var(--radius-lg);
+  --card-content-padding-x: var(--spacing-5);
+  --card-content-padding-y: var(--spacing-4);
+  --card-content-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;