@nexxtmove/ui 0.1.51 → 0.1.53

package/dist/nuxt.js

@@ -1,37 +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", m = "components/Button/Button.vue", u = "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/DropdownButton/DropdownButton.vue", T = "components/Header/Header.vue", b = "components/Icon/Icon.vue", S = "components/InfoBlock/InfoBlock.vue", I = "components/InputField/InputField.vue", f = "components/Modal/Modal.vue", P = "components/Pagination/Pagination.vue", h = "components/PresenceIndicator/PresenceIndicator.vue", M = "components/ProgressBar/ProgressBar.vue", k = "components/SocialIcons/SocialIcons.vue", B = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", g = "components/SocialMediaTemplate/SocialMediaTemplate.vue", y = "components/SocialMediaType/SocialMediaType.vue", A = "components/Source/Source.vue", D = "components/StepperHeader/StepperHeader.vue", H = "components/TabbedContent/TabbedContent.vue", w = "components/Table/Table.vue", E = "components/Tabs/Tabs.vue", F = "components/TimelineEvent/TimelineEvent.vue", J = "components/TimelinePhaseblock/TimelinePhaseblock.vue", j = "components/Tooltip/Tooltip.vue", $ = {
+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: m,
-  NexxtCalendar: u,
+  NexxtButton: u,
+  NexxtCalendar: m,
+  NexxtCard: r,
   NexxtCheckbox: p,
-  NexxtChip: r,
+  NexxtChip: d,
   NexxtCombobox: l,
-  NexxtContactInfoCard: d,
-  NexxtCustomerJourneyTile: v,
+  NexxtContactInfoCard: v,
+  NexxtCustomerJourneyTile: C,
   NexxtDatePicker: N,
-  NexxtDropdownButton: C,
-  NexxtHeader: T,
-  NexxtIcon: b,
-  NexxtInfoBlock: S,
+  NexxtDoughnutChart: T,
+  NexxtDropdownButton: b,
+  NexxtHeader: P,
+  NexxtIcon: S,
+  NexxtInfoBlock: h,
   NexxtInputField: I,
   NexxtModal: f,
-  NexxtPagination: P,
-  NexxtPresenceIndicator: h,
+  NexxtPagination: g,
+  NexxtPresenceIndicator: y,
   NexxtProgressBar: M,
-  NexxtSocialIcons: k,
-  NexxtSocialMediaCustomTemplate: B,
-  NexxtSocialMediaTemplate: g,
-  NexxtSocialMediaType: y,
-  NexxtSource: A,
-  NexxtStepperHeader: D,
-  NexxtTabbedContent: H,
-  NexxtTable: w,
-  NexxtTabs: E,
-  NexxtTimelineEvent: F,
-  NexxtTimelinePhaseblock: J,
-  NexxtTooltip: j
-}, O = c({
+  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",
@@ -43,7 +47,7 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries($))
+    for (const [t, n] of Object.entries(U))
       s({
         name: t,
         export: "default",
@@ -62,5 +66,5 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar
   }
 });
 export {
-  O as default
+  q as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.51",
+  "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/DoughnutChart/DoughnutChart.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, type CSSProperties } from 'vue'
+
+type ColorScale =
+  | 'gray'
+  | 'cornflower-blue'
+  | 'orange'
+  | 'purple'
+  | 'rose'
+  | 'green'
+  | 'sapphire'
+  | 'yale-blue'
+  | 'brick'
+type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
+type BrandColor = `brands-${'facebook' | 'instagram' | 'linkedin' | 'x' | 'google' | 'tiktok'}`
+type TailwindColor = `${ColorScale}-${ColorShade}` | 'white' | BrandColor
+type Color = (CSSProperties['color'] & {}) | TailwindColor
+
+interface NexxtDoughnutChartProps {
+  value: number
+  percentage: number
+  color?: Color
+  backgroundColor?: Color
+  size?: number
+  thickness?: number
+  delay?: number
+  duration?: number
+}
+
+defineOptions({
+  name: 'NexxtDoughnutChart',
+})
+
+const {
+  value,
+  percentage,
+  backgroundColor,
+  color = 'orange-500',
+  size = 160,
+  thickness = 20,
+  delay = 0,
+  duration = 800,
+} = defineProps<NexxtDoughnutChartProps>()
+
+const animated = ref(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    animated.value = true
+  }, delay)
+})
+
+const radius = computed(() => (size - thickness) / 2)
+const circumference = computed(() => 2 * Math.PI * radius.value)
+const center = computed(() => size / 2)
+
+const arc = computed(() => {
+  const fraction = Math.min(1, Math.max(0, percentage / 100))
+  return fraction * circumference.value
+})
+
+const resolveColor = (value: Color) => {
+  if (/^(#|rgb|hsl|oklch|lch|lab|hwb|var\(|color\()/.test(value)) return value
+  if (!value.includes('-')) return value
+  return `var(--color-${value})`
+}
+
+const resolvedColor = computed(() => resolveColor(color))
+const resolvedBackgroundColor = computed(() =>
+  backgroundColor ? resolveColor(backgroundColor) : undefined,
+)
+</script>
+
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    :viewBox="`0 0 ${size} ${size}`"
+    role="img"
+    :aria-label="`${value}`"
+  >
+    <g :transform="`scale(-1, 1) translate(-${size}, 0) rotate(-90, ${center}, ${center})`">
+      <circle
+        v-if="backgroundColor"
+        :cx="center"
+        :cy="center"
+        :r="radius"
+        fill="none"
+        :stroke="resolvedBackgroundColor"
+        :stroke-width="thickness"
+      />
+      <circle
+        :cx="center"
+        :cy="center"
+        :r="radius"
+        fill="none"
+        :stroke="resolvedColor"
+        :stroke-width="thickness"
+        stroke-linecap="butt"
+        :stroke-dasharray="`${animated ? arc : 0} ${circumference}`"
+        :style="{ transition: `stroke-dasharray ${duration}ms ease-out` }"
+      />
+    </g>
+    <foreignObject
+      :x="thickness"
+      :y="thickness"
+      :width="size - thickness * 2"
+      :height="size - thickness * 2"
+    >
+      <div
+        xmlns="http://www.w3.org/1999/xhtml"
+        class="flex h-full w-full items-center justify-center"
+      >
+        <slot>
+          <span class="heading-1 text-sapphire-900">{{ value }}</span>
+        </slot>
+      </div>
+    </foreignObject>
+  </svg>
+</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,12 +3,14 @@
   "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",
   "NexxtContactInfoCard": "components/ContactInfoCard/ContactInfoCard.vue",
   "NexxtCustomerJourneyTile": "components/CustomerJourneyTile/CustomerJourneyTile.vue",
   "NexxtDatePicker": "components/DatePicker/DatePicker.vue",
+  "NexxtDoughnutChart": "components/DoughnutChart/DoughnutChart.vue",
   "NexxtDropdownButton": "components/DropdownButton/DropdownButton.vue",
   "NexxtHeader": "components/Header/Header.vue",
   "NexxtIcon": "components/Icon/Icon.vue",
@@ -18,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,12 +3,14 @@ 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 NexxtContactInfoCard } from './components/ContactInfoCard/ContactInfoCard.vue'
 export { default as NexxtCustomerJourneyTile } from './components/CustomerJourneyTile/CustomerJourneyTile.vue'
 export { default as NexxtDatePicker } from './components/DatePicker/DatePicker.vue'
+export { default as NexxtDoughnutChart } from './components/DoughnutChart/DoughnutChart.vue'
 export { default as NexxtDropdownButton } from './components/DropdownButton/DropdownButton.vue'
 export { default as NexxtHeader } from './components/Header/Header.vue'
 export { default as NexxtIcon } from './components/Icon/Icon.vue'
@@ -18,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'