@nexxtmove/ui 0.1.52 → 0.1.53

package/dist/nuxt.js

@@ -1,38 +1,41 @@
 import { defineNuxtModule as c, addComponent as s, addTemplate as a } from "@nuxt/kit";
-const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar/Avatar.vue", u = "components/Button/Button.vue", m = "components/Calendar/Calendar.vue", p = "components/Checkbox/Checkbox.vue", r = "components/Chip/Chip.vue", l = "components/Combobox/Combobox.vue", d = "components/ContactInfoCard/ContactInfoCard.vue", v = "components/CustomerJourneyTile/CustomerJourneyTile.vue", N = "components/DatePicker/DatePicker.vue", C = "components/DoughnutChart/DoughnutChart.vue", T = "components/DropdownButton/DropdownButton.vue", b = "components/Header/Header.vue", S = "components/Icon/Icon.vue", h = "components/InfoBlock/InfoBlock.vue", I = "components/InputField/InputField.vue", f = "components/Modal/Modal.vue", P = "components/Pagination/Pagination.vue", M = "components/PresenceIndicator/PresenceIndicator.vue", k = "components/ProgressBar/ProgressBar.vue", B = "components/SocialIcons/SocialIcons.vue", g = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", D = "components/SocialMediaTemplate/SocialMediaTemplate.vue", y = "components/SocialMediaType/SocialMediaType.vue", A = "components/Source/Source.vue", H = "components/StepperHeader/StepperHeader.vue", w = "components/TabbedContent/TabbedContent.vue", E = "components/Table/Table.vue", F = "components/Tabs/Tabs.vue", J = "components/TimelineEvent/TimelineEvent.vue", j = "components/TimelinePhaseblock/TimelinePhaseblock.vue", $ = "components/Tooltip/Tooltip.vue", K = {
+const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar/Avatar.vue", u = "components/Button/Button.vue", m = "components/Calendar/Calendar.vue", r = "components/Card/Card.vue", p = "components/Checkbox/Checkbox.vue", d = "components/Chip/Chip.vue", l = "components/Combobox/Combobox.vue", v = "components/ContactInfoCard/ContactInfoCard.vue", C = "components/CustomerJourneyTile/CustomerJourneyTile.vue", N = "components/DatePicker/DatePicker.vue", T = "components/DoughnutChart/DoughnutChart.vue", b = "components/DropdownButton/DropdownButton.vue", P = "components/Header/Header.vue", S = "components/Icon/Icon.vue", h = "components/InfoBlock/InfoBlock.vue", I = "components/InputField/InputField.vue", f = "components/Modal/Modal.vue", g = "components/Pagination/Pagination.vue", y = "components/PresenceIndicator/PresenceIndicator.vue", M = "components/ProgressBar/ProgressBar.vue", k = "components/PropertyCard/PropertyCard.vue", B = "components/PropertyListing/PropertyListing.vue", D = "components/SocialIcons/SocialIcons.vue", A = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", H = "components/SocialMediaTemplate/SocialMediaTemplate.vue", w = "components/SocialMediaType/SocialMediaType.vue", E = "components/Source/Source.vue", F = "components/StepperHeader/StepperHeader.vue", J = "components/TabbedContent/TabbedContent.vue", L = "components/Table/Table.vue", j = "components/Tabs/Tabs.vue", $ = "components/TimelineEvent/TimelineEvent.vue", K = "components/TimelinePhaseblock/TimelinePhaseblock.vue", O = "components/Tooltip/Tooltip.vue", U = {
   NexxtAnimatedNumber: x,
   NexxtAvatar: i,
   NexxtButton: u,
   NexxtCalendar: m,
+  NexxtCard: r,
   NexxtCheckbox: p,
-  NexxtChip: r,
+  NexxtChip: d,
   NexxtCombobox: l,
-  NexxtContactInfoCard: d,
-  NexxtCustomerJourneyTile: v,
+  NexxtContactInfoCard: v,
+  NexxtCustomerJourneyTile: C,
   NexxtDatePicker: N,
-  NexxtDoughnutChart: C,
-  NexxtDropdownButton: T,
-  NexxtHeader: b,
+  NexxtDoughnutChart: T,
+  NexxtDropdownButton: b,
+  NexxtHeader: P,
   NexxtIcon: S,
   NexxtInfoBlock: h,
   NexxtInputField: I,
   NexxtModal: f,
-  NexxtPagination: P,
-  NexxtPresenceIndicator: M,
-  NexxtProgressBar: k,
-  NexxtSocialIcons: B,
-  NexxtSocialMediaCustomTemplate: g,
-  NexxtSocialMediaTemplate: D,
-  NexxtSocialMediaType: y,
-  NexxtSource: A,
-  NexxtStepperHeader: H,
-  NexxtTabbedContent: w,
-  NexxtTable: E,
-  NexxtTabs: F,
-  NexxtTimelineEvent: J,
-  NexxtTimelinePhaseblock: j,
-  NexxtTooltip: $
-}, U = c({
+  NexxtPagination: g,
+  NexxtPresenceIndicator: y,
+  NexxtProgressBar: M,
+  NexxtPropertyCard: k,
+  NexxtPropertyListing: B,
+  NexxtSocialIcons: D,
+  NexxtSocialMediaCustomTemplate: A,
+  NexxtSocialMediaTemplate: H,
+  NexxtSocialMediaType: w,
+  NexxtSource: E,
+  NexxtStepperHeader: F,
+  NexxtTabbedContent: J,
+  NexxtTable: L,
+  NexxtTabs: j,
+  NexxtTimelineEvent: $,
+  NexxtTimelinePhaseblock: K,
+  NexxtTooltip: O
+}, q = c({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -44,7 +47,7 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(K))
+    for (const [t, n] of Object.entries(U))
       s({
         name: t,
         export: "default",
@@ -63,5 +66,5 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar
   }
 });
 export {
-  U as default
+  q as default
 };

package/package.json

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

package/src/components/Card/Card.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  image?: string
+  imageAlt?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div
+    class="card bg-color-white inline-flex w-80 flex-col items-start justify-start gap-0 rounded-t-lg"
+  >
+    <slot name="image" v-if="image || $slots.image">
+      <img
+        v-if="image"
+        :src="image"
+        :alt="imageAlt ?? 'Card afbeelding'"
+        class="block h-40 max-h-40 min-h-40 w-full rounded-tl-lg rounded-tr-lg object-cover"
+      />
+    </slot>
+
+    <div
+      class="card-content box-border flex w-full flex-col gap-2 rounded-b-lg border border-gray-200 px-4 py-2"
+      :class="{ 'rounded-t-lg border-t': !image && !$slots.image }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

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,6 +3,7 @@
   "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",
@@ -19,6 +20,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,6 +3,7 @@ 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'
@@ -19,6 +20,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'