@nexxtmove/ui 0.1.52 → 0.1.54

package/src/components/PropertyCard/PropertyCard.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import NexxtCard from '../Card/Card.vue'
+import NexxtPropertyListing from '../PropertyListing/PropertyListing.vue'
+import NexxtIcon from '../Icon/Icon.vue'
+import PropertyPlaceholder from '../../assets/images/property_placeholder.jpg'
+
+export interface NexxtPropertyCardProps {
+  image?: string
+  imageAlt?: string
+  price?: number
+  city: string
+  text?: string
+}
+
+defineOptions({ name: 'NexxtPropertyCard' })
+
+defineProps<NexxtPropertyCardProps>()
+</script>
+
+<template>
+  <NexxtCard :image="image" :image-alt="imageAlt">
+    <template v-if="!image" #image>
+      <div class="relative isolate h-40 w-full overflow-hidden rounded-tl-lg rounded-tr-lg">
+        <img
+          :src="PropertyPlaceholder"
+          alt="Woning placeholder"
+          loading="lazy"
+          class="h-full w-full object-cover"
+        />
+        <div
+          class="absolute inset-0 flex items-center justify-center rounded-tl-lg rounded-tr-lg bg-white/20 backdrop-blur-sm"
+        >
+          <NexxtIcon name="house" class="text-6xl text-white drop-shadow" />
+        </div>
+      </div>
+    </template>
+    <NexxtPropertyListing :price="price" :city="city" :text="text" />
+  </NexxtCard>
+</template>

package/src/components/PropertyListing/PropertyListing.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  price?: number
+  city: string
+  text?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="flex flex-col items-start justify-start gap-2 self-stretch overflow-hidden">
+    <div class="inline-flex w-full items-center gap-2 overflow-hidden">
+      <div v-if="price" class="text-color-gray-950 shrink-0 body-semibold">
+        € {{ price.toLocaleString('nl-NL') }}
+      </div>
+      <div v-if="price" class="text-color-gray-950 shrink-0 body-normal">|</div>
+      <div
+        class="text-color-gray-950 min-w-0 truncate"
+        :class="price ? 'body-normal' : 'body-semibold'"
+      >
+        {{ city }}
+      </div>
+    </div>
+
+    <div v-if="text" class="text-color-gray-950 wrap-break-words w-full body-normal">
+      {{ text }}
+    </div>
+  </div>
+</template>

package/src/components/TimelinePhaseblock/TimelinePhaseblock.vue

@@ -70,7 +70,7 @@ const getPhaseDirection = () => {
 <template>
   <div class="relative z-10 flex flex-col gap-16" :data-phase="phase.phase.value">
     <template v-if="index === 0 && isSplitView">
-      <div class="relative z-10 bg-white">
+      <div class="relative z-10">
         <div class="flex items-center justify-between px-4 py-2">
           <span class="flex gap-1">
             Outbound
@@ -91,15 +91,15 @@ const getPhaseDirection = () => {
     </template>
     <!-- Left timeline line (always shown) -->
     <div
-      class="absolute top-0 bottom-0 left-5 w-0 border-l"
-      :class="PHASE_MAP[phase.phase.value].color"
+      class="absolute bottom-0 left-5 w-0 border-l"
+      :class="[PHASE_MAP[phase.phase.value].color, index === 0 && isSplitView ? 'top-10' : 'top-0']"
     ></div>
 
     <!-- Right timeline line (split view only) -->
     <div
       v-if="isSplitView"
-      class="absolute top-0 right-5 bottom-0 w-0 border-l"
-      :class="PHASE_MAP[phase.phase.value].color"
+      class="absolute right-5 bottom-0 w-0 border-l"
+      :class="[PHASE_MAP[phase.phase.value].color, index === 0 ? 'top-10' : 'top-0']"
     ></div>
 
     <!-- Events -->
@@ -113,7 +113,7 @@ const getPhaseDirection = () => {
     <!-- Phase separator badge (not shown for the very first phase) -->
     <div
       v-if="index !== phases.length - 1"
-      class="relative flex flex-col items-center bg-white pt-8 pb-24 text-center"
+      class="relative flex flex-col items-center pt-8 pb-24 text-center"
       :class="{ 'pl-16': !isSplitView }"
     >
       <div
@@ -144,13 +144,13 @@ const getPhaseDirection = () => {
       <div v-if="!isLast" class="h-1"></div>
 
       <div
-        class="absolute top-0 bottom-0 left-5 w-[1px] bg-linear-to-b"
+        class="absolute top-0 bottom-0 left-5 w-px bg-linear-to-b"
         :class="gradientClasses"
       ></div>
 
       <div
         v-if="isSplitView"
-        class="absolute top-0 right-5 bottom-0 w-[1px] bg-linear-to-b"
+        class="absolute top-0 right-5 bottom-0 w-px bg-linear-to-b"
         :class="gradientClasses"
       ></div>
     </div>

package/src/components.json

@@ -3,9 +3,11 @@
   "NexxtAvatar": "components/Avatar/Avatar.vue",
   "NexxtButton": "components/Button/Button.vue",
   "NexxtCalendar": "components/Calendar/Calendar.vue",
+  "NexxtCard": "components/Card/Card.vue",
   "NexxtCheckbox": "components/Checkbox/Checkbox.vue",
   "NexxtChip": "components/Chip/Chip.vue",
   "NexxtCombobox": "components/Combobox/Combobox.vue",
+  "NexxtComboboxPanel": "components/ComboboxPanel/ComboboxPanel.vue",
   "NexxtContactInfoCard": "components/ContactInfoCard/ContactInfoCard.vue",
   "NexxtCustomerJourneyTile": "components/CustomerJourneyTile/CustomerJourneyTile.vue",
   "NexxtDatePicker": "components/DatePicker/DatePicker.vue",
@@ -19,6 +21,8 @@
   "NexxtPagination": "components/Pagination/Pagination.vue",
   "NexxtPresenceIndicator": "components/PresenceIndicator/PresenceIndicator.vue",
   "NexxtProgressBar": "components/ProgressBar/ProgressBar.vue",
+  "NexxtPropertyCard": "components/PropertyCard/PropertyCard.vue",
+  "NexxtPropertyListing": "components/PropertyListing/PropertyListing.vue",
   "NexxtSocialIcons": "components/SocialIcons/SocialIcons.vue",
   "NexxtSocialMediaCustomTemplate": "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue",
   "NexxtSocialMediaTemplate": "components/SocialMediaTemplate/SocialMediaTemplate.vue",

package/src/index.ts

@@ -3,9 +3,11 @@ export { default as NexxtAnimatedNumber } from './components/AnimatedNumber/Anim
 export { default as NexxtAvatar } from './components/Avatar/Avatar.vue'
 export { default as NexxtButton } from './components/Button/Button.vue'
 export { default as NexxtCalendar } from './components/Calendar/Calendar.vue'
+export { default as NexxtCard } from './components/Card/Card.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 NexxtComboboxPanel } from './components/ComboboxPanel/ComboboxPanel.vue'
 export { default as NexxtContactInfoCard } from './components/ContactInfoCard/ContactInfoCard.vue'
 export { default as NexxtCustomerJourneyTile } from './components/CustomerJourneyTile/CustomerJourneyTile.vue'
 export { default as NexxtDatePicker } from './components/DatePicker/DatePicker.vue'
@@ -19,6 +21,8 @@ export { default as NexxtModal } from './components/Modal/Modal.vue'
 export { default as NexxtPagination } from './components/Pagination/Pagination.vue'
 export { default as NexxtPresenceIndicator } from './components/PresenceIndicator/PresenceIndicator.vue'
 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 NexxtSocialIcons } from './components/SocialIcons/SocialIcons.vue'
 export { default as NexxtSocialMediaCustomTemplate } from './components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue'
 export { default as NexxtSocialMediaTemplate } from './components/SocialMediaTemplate/SocialMediaTemplate.vue'