@nexxtmove/ui 0.1.49 → 0.1.50

package/dist/nuxt.js

@@ -1,34 +1,36 @@
-import { defineNuxtModule as s, addComponent as c, addTemplate as a } from "@nuxt/kit";
-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", d = "components/Combobox/Combobox.vue", r = "components/CustomerJourneyTile/CustomerJourneyTile.vue", v = "components/DatePicker/DatePicker.vue", N = "components/DropdownButton/DropdownButton.vue", T = "components/Header/Header.vue", b = "components/Icon/Icon.vue", C = "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/TabbedContent/TabbedContent.vue", A = "components/Table/Table.vue", D = "components/Tabs/Tabs.vue", H = "components/TimelineEvent/TimelineEvent.vue", w = "components/TimelinePhaseblock/TimelinePhaseblock.vue", E = "components/Tooltip/Tooltip.vue", F = {
+import { defineNuxtModule as c, addComponent as s, addTemplate as a } from "@nuxt/kit";
+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", b = "components/Icon/Icon.vue", C = "components/InfoBlock/InfoBlock.vue", S = "components/InputField/InputField.vue", P = "components/Modal/Modal.vue", I = "components/Pagination/Pagination.vue", f = "components/PresenceIndicator/PresenceIndicator.vue", h = "components/ProgressBar/ProgressBar.vue", M = "components/SocialIcons/SocialIcons.vue", k = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", B = "components/SocialMediaTemplate/SocialMediaTemplate.vue", g = "components/SocialMediaType/SocialMediaType.vue", y = "components/Source/Source.vue", A = "components/StepperHeader/StepperHeader.vue", D = "components/TabbedContent/TabbedContent.vue", H = "components/Table/Table.vue", w = "components/Tabs/Tabs.vue", E = "components/TimelineEvent/TimelineEvent.vue", F = "components/TimelinePhaseblock/TimelinePhaseblock.vue", J = "components/Tooltip/Tooltip.vue", j = {
   NexxtAnimatedNumber: i,
   NexxtAvatar: x,
   NexxtButton: m,
   NexxtCalendar: u,
   NexxtCheckbox: p,
   NexxtChip: l,
-  NexxtCombobox: d,
-  NexxtCustomerJourneyTile: r,
+  NexxtCombobox: r,
+  NexxtCustomerJourneyTile: d,
   NexxtDatePicker: v,
   NexxtDropdownButton: N,
   NexxtHeader: T,
   NexxtIcon: b,
   NexxtInfoBlock: C,
   NexxtInputField: S,
-  NexxtModal: f,
-  NexxtPagination: h,
-  NexxtProgressBar: M,
-  NexxtSocialIcons: P,
+  NexxtModal: P,
+  NexxtPagination: I,
+  NexxtPresenceIndicator: f,
+  NexxtProgressBar: h,
+  NexxtSocialIcons: M,
   NexxtSocialMediaCustomTemplate: k,
   NexxtSocialMediaTemplate: B,
-  NexxtSocialMediaType: I,
-  NexxtStepperHeader: g,
-  NexxtTabbedContent: y,
-  NexxtTable: A,
-  NexxtTabs: D,
-  NexxtTimelineEvent: H,
-  NexxtTimelinePhaseblock: w,
-  NexxtTooltip: E
-}, j = s({
+  NexxtSocialMediaType: g,
+  NexxtSource: y,
+  NexxtStepperHeader: A,
+  NexxtTabbedContent: D,
+  NexxtTable: H,
+  NexxtTabs: w,
+  NexxtTimelineEvent: E,
+  NexxtTimelinePhaseblock: F,
+  NexxtTooltip: J
+}, K = c({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -40,8 +42,8 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", x = "components/Avatar
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(F))
-      c({
+    for (const [t, n] of Object.entries(j))
+      s({
         name: t,
         export: "default",
         filePath: `@nexxtmove/ui/${n}`
@@ -59,5 +61,5 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", x = "components/Avatar
   }
 });
 export {
-  j as default
+  K as default
 };

package/package.json

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

package/src/components/Combobox/Combobox.vue

@@ -113,7 +113,7 @@ const transitionClasses = computed(() => {
     <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="absolute top-full z-10 mt-2.5 min-w-80 rounded-lg border border-gray-200 bg-white whitespace-nowrap"
         :class="placement === 'right' ? 'right-0' : 'left-0'"
       >
         <div class="p-2">

package/src/components/DropdownButton/DropdownButton.vue

@@ -119,7 +119,7 @@ const componentClasses = computed(() => {
   }
 
   if (variant === 'secondary') {
-    return 'bg-button-bg-secondary-default text-button-text-secondary-default border-button-border-secondary-default border border-solid'
+    return 'bg-button-bg-secondary-default text-button-text-secondary-default border-button-border-secondary-default border border-solid hover:border-button-border-secondary-hover'
   }
 
   return ''
@@ -157,7 +157,7 @@ const transitionClasses = computed(() => {
     class="relative inline-flex flex-col"
     :class="placement === 'right' ? 'items-end' : 'items-start'"
   >
-    <div class="inline-flex items-center overflow-hidden rounded-md" :class="componentClasses">
+    <div class="inline-flex items-center overflow-hidden rounded-lg" :class="componentClasses">
       <template v-if="!iconOnly">
         <button
           class="flex cursor-pointer items-center gap-2 px-4 py-2 transition-colors duration-200"
@@ -194,7 +194,7 @@ const transitionClasses = computed(() => {
       <div
         v-if="isOpen"
         role="menu"
-        class="absolute top-full z-10 mt-2.5 min-w-full rounded-md border border-gray-200 bg-white whitespace-nowrap"
+        class="absolute top-full z-10 mt-2.5 min-w-full rounded-lg border border-gray-200 bg-white whitespace-nowrap"
         :class="placement === 'right' ? 'right-0' : 'left-0'"
       >
         <template v-for="(group, groupIndex) in groupedOptions" :key="group.title || groupIndex">

package/src/components/Header/Header.vue

@@ -24,13 +24,16 @@ const {
 <template>
   <div class="header flex items-center" :class="$slots.center ? 'grid grid-cols-3' : ''">
     <div class="flex max-w-full items-center justify-start gap-4">
-      <Button
-        v-if="backButtonText"
-        class="shrink-0"
-        variant="secondary"
-        @click="backButtonAction"
-        >{{ backButtonText }}</Button
-      >
+      <slot name="back-button">
+        <Button
+          v-if="backButtonText && backButtonAction && !$slots['back-button']"
+          class="shrink-0"
+          variant="secondary"
+          @click="backButtonAction"
+        >
+          {{ backButtonText }}
+        </Button>
+      </slot>
       <span class="block truncate text-sapphire-500" :class="headingType">
         {{ title }}
       </span>

package/src/components/InputField/InputField.vue

@@ -8,7 +8,7 @@ defineOptions({
   name: 'NexxtInputField',
 })
 
-interface NexxtInputFieldProps {
+export interface NexxtInputFieldProps {
   placeholder?: string
   label?: string
   error?: boolean
@@ -35,8 +35,8 @@ const modelValue = defineModel<string>()
     </label>
 
     <div
-      class="flex items-center gap-2 rounded-sm px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
-      :class="error ? 'ring-brick-400' : 'ring-gray-200'"
+      class="flex items-center gap-2 overflow-hidden rounded-lg ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
+      :class="[error ? 'ring-brick-400' : 'ring-gray-200', { 'px-3': leftIcon }]"
     >
       <span v-if="leftIcon" class="flex items-center">
         <Icon :name="leftIcon" />
@@ -47,7 +47,8 @@ const modelValue = defineModel<string>()
         v-model="modelValue"
         :placeholder="placeholder"
         v-bind="$attrs"
-        class="h-10 min-w-60 bg-transparent text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+        class="bg-transparant h-10 w-full min-w-60 text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+        :class="{ 'pl-3': !leftIcon, 'pr-3': !rightIcon }"
       />
       <slot name="right">
         <span v-if="rightIcon" class="flex items-center">

package/src/components/PresenceIndicator/PresenceIndicator.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+export interface NexxtPresenceIndicatorProps {
+  online?: boolean
+}
+
+defineOptions({
+  name: 'NexxtPresenceIndicator',
+})
+
+const { online = false } = defineProps<NexxtPresenceIndicatorProps>()
+</script>
+
+<template>
+  <span
+    class="inline-flex h-6 items-center gap-1.5 rounded-sm px-2.5 extra-small-semibold"
+    :class="online ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-700'"
+    :aria-label="online ? 'Online' : 'Offline'"
+    role="status"
+  >
+    <span class="relative flex h-1.5 w-1.5">
+      <span
+        v-if="online"
+        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
+      />
+      <i
+        class="relative block h-1.5 w-1.5 rounded-full"
+        :class="online ? 'bg-green-500' : 'bg-gray-700'"
+      />
+    </span>
+    {{ online ? 'Actief' : 'Inactief' }}
+  </span>
+</template>

package/src/components/Source/Source.vue

@@ -0,0 +1,91 @@
+<script lang="ts">
+import imgBricr from '../../assets/images/source/bricr.png'
+import imgKolibri from '../../assets/images/source/kolibri.png'
+import imgKolibriAppExchange from '../../assets/images/source/kolibri_app_exchange.png'
+import imgRealworks from '../../assets/images/source/realworks.png'
+import imgRealworksAgendaApi from '../../assets/images/source/realworks_agenda_api.png'
+import imgRealworksApi from '../../assets/images/source/realworks_api.png'
+import imgZapier from '../../assets/images/source/zapier.png'
+
+export const SOURCE_MAP = {
+  realworks: 'Realworks',
+  realworks_agenda_api: 'Realworks Agenda API',
+  realworks_api: 'Realworks API',
+  kolibri: 'Kolibri',
+  kolibri_app_exchange: 'Kolibri App Exchange',
+  zapier: 'Zapier',
+  bricr: 'Bricr',
+  website: 'Website',
+  manual: 'Handmatig ingevoerd',
+  tracker: 'Tracker',
+  read_more: 'Lees Meer',
+  planner: 'Planner',
+  forms: 'Forms',
+  dossier_data: 'Dossier Data',
+} as const
+
+interface SourceImage {
+  url: string
+  height: string
+}
+
+const SOURCE_IMAGES: Partial<Record<keyof typeof SOURCE_MAP, SourceImage>> = {
+  bricr: { url: imgBricr, height: 'h-5' },
+  kolibri: { url: imgKolibri, height: 'h-6' },
+  kolibri_app_exchange: { url: imgKolibriAppExchange, height: 'h-6' },
+  realworks: { url: imgRealworks, height: 'h-4' },
+  realworks_agenda_api: { url: imgRealworksAgendaApi, height: 'h-4' },
+  realworks_api: { url: imgRealworksApi, height: 'h-4' },
+  zapier: { url: imgZapier, height: 'h-5' },
+}
+
+interface SourceIcon {
+  icon: string
+  bg: string
+}
+
+const SOUCE_ICONS: Partial<Record<keyof typeof SOURCE_MAP, SourceIcon>> = {
+  website: { icon: 'earth-europe', bg: 'bg-cornflower-blue-500' },
+  manual: { icon: 'money-check-pen', bg: 'bg-orange-500' },
+  tracker: { icon: 'eye', bg: 'bg-purple-500' },
+  read_more: { icon: 'file-export', bg: 'bg-rose-500' },
+  planner: { icon: 'calendar-days', bg: 'bg-rose-500' },
+  forms: { icon: 'square-list', bg: 'bg-cornflower-blue-500' },
+  dossier_data: { icon: 'file', bg: 'bg-orange-500' },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtIcon from '../Icon/Icon.vue'
+
+export interface NexxtSourceProps {
+  source: keyof typeof SOURCE_MAP
+}
+
+defineOptions({ name: 'NexxtSource' })
+
+const props = defineProps<NexxtSourceProps>()
+
+const image = computed(() => SOURCE_IMAGES[props.source])
+const label = computed(() => SOURCE_MAP[props.source])
+const sourceIcon = computed(() => SOUCE_ICONS[props.source])
+const icon = computed(() => sourceIcon.value?.icon as InstanceType<typeof NexxtIcon>['name'])
+const iconBg = computed(() => sourceIcon.value?.bg)
+</script>
+
+<template>
+  <div class="flex h-7 items-center gap-2.5">
+    <img v-if="image" :src="image.url" :alt="label" class="grow-0" :class="image.height" />
+    <template v-else>
+      <span
+        v-if="icon"
+        class="flex aspect-square grow-0 items-center justify-center rounded-full p-1 text-sm text-white"
+        :class="iconBg"
+      >
+        <NexxtIcon :name="icon" />
+      </span>
+      <span>{{ label }}</span>
+    </template>
+  </div>
+</template>

package/src/components/TabbedContent/TabbedContent.vue

@@ -30,9 +30,9 @@ const transitionProps = computed(() =>
         enterActiveClass: 'transition-all duration-300 ease-in-out',
         leaveActiveClass: 'transition-all duration-300 ease-in-out absolute inset-0',
         enterFromClass:
-          direction.value === 'forward' ? 'translate-x-50 opacity-0' : '-translate-x-10 opacity-0',
+          direction.value === 'forward' ? '-translate-x-10 opacity-0' : 'translate-x-10 opacity-0',
         leaveToClass:
-          direction.value === 'forward' ? '-translate-x-50 opacity-0' : 'translate-x-10 opacity-0',
+          direction.value === 'forward' ? 'translate-x-10 opacity-0' : '-translate-x-10 opacity-0',
       }
     : { mode: 'out-in' as const },
 )

package/src/components/Tabs/Tabs.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, nextTick } from 'vue'
 
 interface NexxtTabs {
   tabs: string[]
@@ -14,19 +14,28 @@ const props = defineProps<NexxtTabs>()
 
 const selected = defineModel({ type: String, default: '' })
 
+const containerRef = ref<HTMLElement | null>(null)
 const buttonRefs = ref<HTMLButtonElement[]>([])
 const sliderStyle = ref({ width: '0px', transform: 'translateX(0px)' })
+const clipPath = ref('inset(0 100% 0 0 round 9999px)')
+const ready = ref(false)
 
-const updateSlider = () => {
+const updateSlider = async () => {
+  await nextTick()
   const index = props.tabs.indexOf(selected.value)
   const button = buttonRefs.value[index]
+  if (!button || !containerRef.value) return
 
-  if (!button) return
+  const left = button.offsetLeft
+  const width = button.offsetWidth
+  const right = containerRef.value.offsetWidth - left - width
 
   sliderStyle.value = {
-    width: `${button.offsetWidth}px`,
-    transform: `translateX(${button.offsetLeft}px)`,
+    width: `${width}px`,
+    transform: `translateX(${left}px)`,
   }
+
+  clipPath.value = `inset(0 ${right}px 0 ${left}px round 9999px)`
 }
 
 const onKeydown = (event: KeyboardEvent, index: number) => {
@@ -42,25 +51,32 @@ const onKeydown = (event: KeyboardEvent, index: number) => {
   buttonRefs.value[next]?.focus()
 }
 
-watch(selected, () => updateSlider())
+watch(selected, async () => await updateSlider())
 
 onMounted(async () => {
   await document.fonts.ready
-  updateSlider()
+  await updateSlider()
+  await nextTick()
+  ready.value = true
 })
 </script>
 
 <template>
   <div
+    ref="containerRef"
     role="tablist"
     :aria-label="tablistLabel"
-    class="relative flex rounded-full border-4 border-white bg-white"
+    class="relative isolate flex rounded-full border-4 border-white bg-white"
   >
+    <!-- slider pill -->
     <div
       aria-hidden="true"
-      class="absolute h-9 rounded-full bg-cornflower-blue-500 transition-all duration-300 ease-in-out"
+      class="absolute h-9 rounded-full bg-cornflower-blue-500"
+      :class="ready ? 'transition-all duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]' : ''"
       :style="sliderStyle"
     />
+
+    <!-- dark text buttons -->
     <button
       v-for="(tab, index) in tabs"
       :key="tab"
@@ -68,12 +84,30 @@ onMounted(async () => {
       role="tab"
       :aria-selected="selected === tab"
       :tabindex="selected === tab ? 0 : -1"
-      class="relative z-10 h-9 cursor-pointer rounded-full px-4 transition-colors delay-100 duration-150"
-      :class="{ 'text-white': selected === tab }"
+      class="relative h-9 cursor-pointer rounded-full px-4 text-sm text-gray-950 transition-none"
+      :class="selected === tab ? 'z-10' : 'z-30'"
       @click="selected = tab"
       @keydown="onKeydown($event, index)"
     >
       {{ tab }}
     </button>
+
+    <!-- white text overlay, clipped to slider bounds -->
+    <div
+      aria-hidden="true"
+      class="pointer-events-none absolute inset-0 z-20 flex"
+      :class="
+        ready ? 'transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]' : ''
+      "
+      :style="{ clipPath }"
+    >
+      <span
+        v-for="tab in tabs"
+        :key="tab"
+        class="flex h-9 items-center rounded-full px-4 text-sm text-white"
+      >
+        {{ tab }}
+      </span>
+    </div>
   </div>
 </template>

package/src/components.json

@@ -15,11 +15,13 @@
   "NexxtInputField": "components/InputField/InputField.vue",
   "NexxtModal": "components/Modal/Modal.vue",
   "NexxtPagination": "components/Pagination/Pagination.vue",
+  "NexxtPresenceIndicator": "components/PresenceIndicator/PresenceIndicator.vue",
   "NexxtProgressBar": "components/ProgressBar/ProgressBar.vue",
   "NexxtSocialIcons": "components/SocialIcons/SocialIcons.vue",
   "NexxtSocialMediaCustomTemplate": "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue",
   "NexxtSocialMediaTemplate": "components/SocialMediaTemplate/SocialMediaTemplate.vue",
   "NexxtSocialMediaType": "components/SocialMediaType/SocialMediaType.vue",
+  "NexxtSource": "components/Source/Source.vue",
   "NexxtStepperHeader": "components/StepperHeader/StepperHeader.vue",
   "NexxtTabbedContent": "components/TabbedContent/TabbedContent.vue",
   "NexxtTable": "components/Table/Table.vue",

package/src/index.ts

@@ -15,11 +15,13 @@ export { default as NexxtInfoBlock } from './components/InfoBlock/InfoBlock.vue'
 export { default as NexxtInputField } from './components/InputField/InputField.vue'
 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 NexxtSocialIcons } from './components/SocialIcons/SocialIcons.vue'
 export { default as NexxtSocialMediaCustomTemplate } from './components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue'
 export { default as NexxtSocialMediaTemplate } from './components/SocialMediaTemplate/SocialMediaTemplate.vue'
 export { default as NexxtSocialMediaType } from './components/SocialMediaType/SocialMediaType.vue'
+export { default as NexxtSource, SOURCE_MAP } from './components/Source/Source.vue'
 export { default as NexxtStepperHeader } from './components/StepperHeader/StepperHeader.vue'
 export { default as NexxtTabbedContent } from './components/TabbedContent/TabbedContent.vue'
 export { default as NexxtTable } from './components/Table/Table.vue'