@nexxtmove/ui 0.1.61 → 0.1.62

package/dist/nuxt.js

@@ -1,5 +1,5 @@
 import { defineNuxtModule as c, addComponent as s, addTemplate as a } from "@nuxt/kit";
-const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar/Avatar.vue", r = "components/Button/Button.vue", m = "components/Calendar/Calendar.vue", u = "components/Card/Card.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", d = "components/Combobox/Combobox.vue", v = "components/ComboboxPanel/ComboboxPanel.vue", C = "components/ContactInfoCard/ContactInfoCard.vue", N = "components/CustomerJourneyTile/CustomerJourneyTile.vue", b = "components/DatePicker/DatePicker.vue", P = "components/DoughnutChart/DoughnutChart.vue", T = "components/DropdownButton/DropdownButton.vue", S = "components/FloatingPanel/FloatingPanel.vue", h = "components/Header/Header.vue", k = "components/Icon/Icon.vue", I = "components/InfoBlock/InfoBlock.vue", f = "components/InputField/InputField.vue", g = "components/Modal/Modal.vue", y = "components/Pagination/Pagination.vue", M = "components/PresenceIndicator/PresenceIndicator.vue", B = "components/ProgressBar/ProgressBar.vue", D = "components/PropertyCard/PropertyCard.vue", A = "components/PropertyListing/PropertyListing.vue", F = "components/Skeleton/Skeleton.vue", H = "components/SkeletonPropertyCard/SkeletonPropertyCard.vue", w = "components/SocialIcons/SocialIcons.vue", E = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", J = "components/SocialMediaTemplate/SocialMediaTemplate.vue", L = "components/SocialMediaType/SocialMediaType.vue", j = "components/Source/Source.vue", $ = "components/StepperHeader/StepperHeader.vue", K = "components/TabbedContent/TabbedContent.vue", O = "components/Table/Table.vue", U = "components/Tabs/Tabs.vue", _ = "components/TimelineEvent/TimelineEvent.vue", q = "components/TimelinePhaseblock/TimelinePhaseblock.vue", z = "components/Tooltip/Tooltip.vue", G = {
+const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar/Avatar.vue", r = "components/Button/Button.vue", m = "components/Calendar/Calendar.vue", u = "components/Card/Card.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", d = "components/Combobox/Combobox.vue", v = "components/ComboboxPanel/ComboboxPanel.vue", C = "components/ContactInfoCard/ContactInfoCard.vue", N = "components/CustomerJourneyTile/CustomerJourneyTile.vue", b = "components/DatePicker/DatePicker.vue", P = "components/DoughnutChart/DoughnutChart.vue", S = "components/DropdownButton/DropdownButton.vue", T = "components/FloatingPanel/FloatingPanel.vue", h = "components/Header/Header.vue", k = "components/Icon/Icon.vue", I = "components/InfoBlock/InfoBlock.vue", f = "components/InputField/InputField.vue", g = "components/Modal/Modal.vue", y = "components/Pagination/Pagination.vue", M = "components/PresenceIndicator/PresenceIndicator.vue", B = "components/ProgressBar/ProgressBar.vue", D = "components/PropertyCard/PropertyCard.vue", A = "components/PropertyListing/PropertyListing.vue", F = "components/Select/Select.vue", H = "components/Skeleton/Skeleton.vue", w = "components/SkeletonPropertyCard/SkeletonPropertyCard.vue", E = "components/SocialIcons/SocialIcons.vue", J = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", L = "components/SocialMediaTemplate/SocialMediaTemplate.vue", j = "components/SocialMediaType/SocialMediaType.vue", $ = "components/Source/Source.vue", K = "components/StepperHeader/StepperHeader.vue", O = "components/TabbedContent/TabbedContent.vue", U = "components/Table/Table.vue", _ = "components/Tabs/Tabs.vue", q = "components/TimelineEvent/TimelineEvent.vue", z = "components/TimelinePhaseblock/TimelinePhaseblock.vue", G = "components/Tooltip/Tooltip.vue", Q = {
   NexxtAnimatedNumber: x,
   NexxtAvatar: i,
   NexxtButton: r,
@@ -13,8 +13,8 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar
   NexxtCustomerJourneyTile: N,
   NexxtDatePicker: b,
   NexxtDoughnutChart: P,
-  NexxtDropdownButton: T,
-  NexxtFloatingPanel: S,
+  NexxtDropdownButton: S,
+  NexxtFloatingPanel: T,
   NexxtHeader: h,
   NexxtIcon: k,
   NexxtInfoBlock: I,
@@ -25,21 +25,22 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar
   NexxtProgressBar: B,
   NexxtPropertyCard: D,
   NexxtPropertyListing: A,
-  NexxtSkeleton: F,
-  NexxtSkeletonPropertyCard: H,
-  NexxtSocialIcons: w,
-  NexxtSocialMediaCustomTemplate: E,
-  NexxtSocialMediaTemplate: J,
-  NexxtSocialMediaType: L,
-  NexxtSource: j,
-  NexxtStepperHeader: $,
-  NexxtTabbedContent: K,
-  NexxtTable: O,
-  NexxtTabs: U,
-  NexxtTimelineEvent: _,
-  NexxtTimelinePhaseblock: q,
-  NexxtTooltip: z
-}, R = c({
+  NexxtSelect: F,
+  NexxtSkeleton: H,
+  NexxtSkeletonPropertyCard: w,
+  NexxtSocialIcons: E,
+  NexxtSocialMediaCustomTemplate: J,
+  NexxtSocialMediaTemplate: L,
+  NexxtSocialMediaType: j,
+  NexxtSource: $,
+  NexxtStepperHeader: K,
+  NexxtTabbedContent: O,
+  NexxtTable: U,
+  NexxtTabs: _,
+  NexxtTimelineEvent: q,
+  NexxtTimelinePhaseblock: z,
+  NexxtTooltip: G
+}, V = c({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -51,7 +52,7 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(G))
+    for (const [t, n] of Object.entries(Q))
       s({
         name: t,
         export: "default",
@@ -70,5 +71,5 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar
   }
 });
 export {
-  R as default
+  V as default
 };

package/package.json

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

package/src/components/FloatingPanel/FloatingPanel.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useFloating, autoUpdate, flip, shift, offset } from '@floating-ui/vue'
+import { useFloating, autoUpdate, flip, shift, offset, size } from '@floating-ui/vue'
 import type { Placement } from '@floating-ui/vue'
 
 export interface NexxtFloatingPanelProps {
   placement?: Placement
   offsetDistance?: number
+  matchWidth?: boolean
 }
 
 defineOptions({ name: 'NexxtFloatingPanel' })
@@ -13,6 +14,7 @@ defineOptions({ name: 'NexxtFloatingPanel' })
 const props = withDefaults(defineProps<NexxtFloatingPanelProps>(), {
   placement: 'bottom-start',
   offsetDistance: 8,
+  matchWidth: false,
 })
 
 const emit = defineEmits<{
@@ -26,6 +28,21 @@ const isLeaving = ref(false)
 const triggerRef = ref<HTMLElement | null>(null)
 const floatingRef = ref<HTMLElement | null>(null)
 
+const middleware = computed(() => [
+  offset(props.offsetDistance),
+  flip(),
+  shift({ padding: 8 }),
+  ...(props.matchWidth
+    ? [
+        size({
+          apply: ({ rects, elements }) => {
+            elements.floating.style.minWidth = `${rects.reference.width}px`
+          },
+        }),
+      ]
+    : []),
+])
+
 const {
   floatingStyles,
   placement: computedPlacement,
@@ -33,7 +50,7 @@ const {
 } = useFloating(triggerRef, floatingRef, {
   placement: computed(() => props.placement),
   whileElementsMounted: autoUpdate,
-  middleware: [offset(props.offsetDistance), flip(), shift({ padding: 8 })],
+  middleware,
   // fixed strategy escapes overflow clipping (e.g. inside a Modal) without
   // needing a body teleport that Reka UI's dialog would block with pointer-events:none.
   strategy: 'fixed',

package/src/components/Select/Select.vue

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtIcon from '../Icon/Icon.vue'
+import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
+import type Icon from '../Icon/Icon.vue'
+
+export type SelectOption = { label: string; value: string | number } | string
+
+const getLabel = (opt: SelectOption) => (typeof opt === 'string' ? opt : opt.label)
+const getValue = (opt: SelectOption): string | number => (typeof opt === 'string' ? opt : opt.value)
+
+const generateId = () => 'select-' + Math.random().toString(36).slice(2, 10)
+const selectId = generateId()
+
+defineOptions({ name: 'NexxtSelect' })
+
+interface NexxtSelectProps {
+  options: SelectOption[]
+  placeholder?: string
+  label?: string
+  error?: boolean
+  errorMessage?: string
+  leftIcon?: InstanceType<typeof Icon>['name']
+  required?: boolean
+}
+
+const props = withDefaults(defineProps<NexxtSelectProps>(), {
+  placeholder: 'Selecteer...',
+})
+
+const model = defineModel<string | number | null>({ default: null })
+
+const selectedLabel = computed(() => {
+  if (model.value === null || model.value === undefined) return null
+  const found = props.options.find((opt) => getValue(opt) === model.value)
+  return found ? getLabel(found) : null
+})
+
+const select = (opt: SelectOption, close: () => void) => {
+  model.value = getValue(opt)
+  close()
+}
+</script>
+
+<template>
+  <div class="inline-flex flex-col gap-1">
+    <label
+      v-if="label"
+      class="text-color-gray-700 justify-start body-normal text-sm"
+      :for="selectId"
+    >
+      {{ label }}
+      <span v-if="required" class="text-brick-500">*</span>
+    </label>
+
+    <NexxtFloatingPanel placement="bottom" match-width>
+      <template #trigger="{ isOpen, toggle }">
+        <div
+          :id="selectId"
+          role="combobox"
+          :aria-expanded="isOpen"
+          aria-haspopup="listbox"
+          tabindex="0"
+          class="flex w-full cursor-pointer items-center gap-2 rounded-lg ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
+          :class="[error ? 'ring-brick-400' : 'ring-gray-200', { 'pl-3': leftIcon, 'pr-3': true }]"
+          @click="toggle"
+          @keydown.enter.prevent="toggle"
+          @keydown.space.prevent="toggle"
+        >
+          <span v-if="leftIcon" class="flex items-center">
+            <NexxtIcon :name="leftIcon" />
+          </span>
+          <span
+            class="flex h-10 w-full min-w-60 items-center text-sm"
+            :class="[selectedLabel ? 'text-gray-900' : 'text-gray-400', { 'pl-3': !leftIcon }]"
+          >
+            {{ selectedLabel ?? placeholder }}
+          </span>
+          <NexxtIcon
+            name="chevron-down"
+            class="shrink-0 text-gray-400 transition-transform duration-200"
+            :class="{ 'rotate-180': isOpen }"
+          />
+        </div>
+      </template>
+
+      <template #content="{ close }">
+        <ul role="listbox" class="overflow-hidden rounded-lg bg-white shadow-xs ring ring-gray-100">
+          <li
+            v-for="opt in options"
+            :key="getValue(opt)"
+            role="option"
+            :aria-selected="model === getValue(opt)"
+            class="flex cursor-pointer items-center justify-between px-4 py-3 text-sm text-gray-900 transition-colors duration-150 hover:bg-gray-50 hover:text-purple-600"
+            :class="{ 'font-medium text-cornflower-blue-600': model === getValue(opt) }"
+            @click="select(opt, close)"
+          >
+            {{ getLabel(opt) }}
+            <NexxtIcon v-if="model === getValue(opt)" name="check" class="text-xs" />
+          </li>
+        </ul>
+      </template>
+    </NexxtFloatingPanel>
+
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="opacity-0 -translate-y-1"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition-all duration-150 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 -translate-y-1"
+    >
+      <p v-if="error && errorMessage" class="text-sm text-brick-400">
+        {{ errorMessage }}
+      </p>
+    </Transition>
+  </div>
+</template>

package/src/components.json

@@ -24,6 +24,7 @@
   "NexxtProgressBar": "components/ProgressBar/ProgressBar.vue",
   "NexxtPropertyCard": "components/PropertyCard/PropertyCard.vue",
   "NexxtPropertyListing": "components/PropertyListing/PropertyListing.vue",
+  "NexxtSelect": "components/Select/Select.vue",
   "NexxtSkeleton": "components/Skeleton/Skeleton.vue",
   "NexxtSkeletonPropertyCard": "components/SkeletonPropertyCard/SkeletonPropertyCard.vue",
   "NexxtSocialIcons": "components/SocialIcons/SocialIcons.vue",

package/src/index.ts

@@ -24,6 +24,7 @@ export { default as NexxtPresenceIndicator } from './components/PresenceIndicato
 export { default as NexxtProgressBar } from './components/ProgressBar/ProgressBar.vue'
 export { default as NexxtPropertyCard } from './components/PropertyCard/PropertyCard.vue'
 export { default as NexxtPropertyListing } from './components/PropertyListing/PropertyListing.vue'
+export { default as NexxtSelect } from './components/Select/Select.vue'
 export { default as NexxtSkeleton } from './components/Skeleton/Skeleton.vue'
 export { default as NexxtSkeletonPropertyCard } from './components/SkeletonPropertyCard/SkeletonPropertyCard.vue'
 export { default as NexxtSocialIcons } from './components/SocialIcons/SocialIcons.vue'