@nexxtmove/ui 0.1.48 → 0.1.49

package/dist/nuxt.js

@@ -1,18 +1,18 @@
-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", C = "components/Icon/Icon.vue", b = "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/Table/Table.vue", A = "components/TimelineEvent/TimelineEvent.vue", D = "components/TimelinePhaseblock/TimelinePhaseblock.vue", H = "components/Tooltip/Tooltip.vue", w = {
+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 = {
   NexxtAnimatedNumber: i,
   NexxtAvatar: x,
   NexxtButton: m,
   NexxtCalendar: u,
   NexxtCheckbox: p,
   NexxtChip: l,
-  NexxtCombobox: r,
-  NexxtCustomerJourneyTile: d,
+  NexxtCombobox: d,
+  NexxtCustomerJourneyTile: r,
   NexxtDatePicker: v,
   NexxtDropdownButton: N,
   NexxtHeader: T,
-  NexxtIcon: C,
-  NexxtInfoBlock: b,
+  NexxtIcon: b,
+  NexxtInfoBlock: C,
   NexxtInputField: S,
   NexxtModal: f,
   NexxtPagination: h,
@@ -22,11 +22,13 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", x = "components/Avatar
   NexxtSocialMediaTemplate: B,
   NexxtSocialMediaType: I,
   NexxtStepperHeader: g,
-  NexxtTable: y,
-  NexxtTimelineEvent: A,
-  NexxtTimelinePhaseblock: D,
-  NexxtTooltip: H
-}, F = c({
+  NexxtTabbedContent: y,
+  NexxtTable: A,
+  NexxtTabs: D,
+  NexxtTimelineEvent: H,
+  NexxtTimelinePhaseblock: w,
+  NexxtTooltip: E
+}, j = s({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -38,8 +40,8 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", x = "components/Avatar
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(w))
-      s({
+    for (const [t, n] of Object.entries(F))
+      c({
         name: t,
         export: "default",
         filePath: `@nexxtmove/ui/${n}`
@@ -57,5 +59,5 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", x = "components/Avatar
   }
 });
 export {
-  F as default
+  j as default
 };

package/package.json

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

package/src/components/TabbedContent/TabbedContent.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue'
+import NexxtTabs from '../Tabs/Tabs.vue'
+
+interface NexxtTabbedContent {
+  tabs: InstanceType<typeof NexxtTabs>['tabs']
+  animated?: boolean
+  label?: string
+}
+
+defineOptions({
+  name: 'NexxtTabbedContent',
+})
+
+const props = defineProps<NexxtTabbedContent>()
+
+const selected = ref(props.tabs[0] ?? '')
+const direction = ref<'forward' | 'backward'>('forward')
+
+watch(selected, (next, prev) => {
+  direction.value = props.tabs.indexOf(next) > props.tabs.indexOf(prev) ? 'forward' : 'backward'
+})
+
+const toSlotName = (tab: string) => tab.toLowerCase().replace(/\s+/g, '-')
+const toId = (tab: string) => `tab-${toSlotName(tab)}`
+
+const transitionProps = computed(() =>
+  props.animated
+    ? {
+        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',
+        leaveToClass:
+          direction.value === 'forward' ? '-translate-x-50 opacity-0' : 'translate-x-10 opacity-0',
+      }
+    : { mode: 'out-in' as const },
+)
+</script>
+
+<template>
+  <div class="flex flex-col items-center">
+    <NexxtTabs :tabs v-model="selected" :tablist-label="label" class="my-5" />
+    <div class="relative w-full overflow-hidden">
+      <Transition v-bind="transitionProps">
+        <div :key="selected" role="tabpanel" :aria-labelledby="toId(selected)" class="w-full">
+          <slot :name="toSlotName(selected)" />
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>

package/src/components/Tabs/Tabs.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { ref, watch, onMounted } from 'vue'
+
+interface NexxtTabs {
+  tabs: string[]
+  tablistLabel?: string
+}
+
+defineOptions({
+  name: 'NexxtTabs',
+})
+
+const props = defineProps<NexxtTabs>()
+
+const selected = defineModel({ type: String, default: '' })
+
+const buttonRefs = ref<HTMLButtonElement[]>([])
+const sliderStyle = ref({ width: '0px', transform: 'translateX(0px)' })
+
+const updateSlider = () => {
+  const index = props.tabs.indexOf(selected.value)
+  const button = buttonRefs.value[index]
+
+  if (!button) return
+
+  sliderStyle.value = {
+    width: `${button.offsetWidth}px`,
+    transform: `translateX(${button.offsetLeft}px)`,
+  }
+}
+
+const onKeydown = (event: KeyboardEvent, index: number) => {
+  let next = index
+  if (event.key === 'ArrowRight') next = (index + 1) % props.tabs.length
+  else if (event.key === 'ArrowLeft') next = (index - 1 + props.tabs.length) % props.tabs.length
+  else if (event.key === 'Home') next = 0
+  else if (event.key === 'End') next = props.tabs.length - 1
+  else return
+
+  event.preventDefault()
+  selected.value = props.tabs[next]
+  buttonRefs.value[next]?.focus()
+}
+
+watch(selected, () => updateSlider())
+
+onMounted(async () => {
+  await document.fonts.ready
+  updateSlider()
+})
+</script>
+
+<template>
+  <div
+    role="tablist"
+    :aria-label="tablistLabel"
+    class="relative flex rounded-full border-4 border-white bg-white"
+  >
+    <div
+      aria-hidden="true"
+      class="absolute h-9 rounded-full bg-cornflower-blue-500 transition-all duration-300 ease-in-out"
+      :style="sliderStyle"
+    />
+    <button
+      v-for="(tab, index) in tabs"
+      :key="tab"
+      :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
+      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 }"
+      @click="selected = tab"
+      @keydown="onKeydown($event, index)"
+    >
+      {{ tab }}
+    </button>
+  </div>
+</template>

package/src/components.json

@@ -21,7 +21,9 @@
   "NexxtSocialMediaTemplate": "components/SocialMediaTemplate/SocialMediaTemplate.vue",
   "NexxtSocialMediaType": "components/SocialMediaType/SocialMediaType.vue",
   "NexxtStepperHeader": "components/StepperHeader/StepperHeader.vue",
+  "NexxtTabbedContent": "components/TabbedContent/TabbedContent.vue",
   "NexxtTable": "components/Table/Table.vue",
+  "NexxtTabs": "components/Tabs/Tabs.vue",
   "NexxtTimelineEvent": "components/TimelineEvent/TimelineEvent.vue",
   "NexxtTimelinePhaseblock": "components/TimelinePhaseblock/TimelinePhaseblock.vue",
   "NexxtTooltip": "components/Tooltip/Tooltip.vue"

package/src/index.ts

@@ -21,7 +21,9 @@ export { default as NexxtSocialMediaCustomTemplate } from './components/SocialMe
 export { default as NexxtSocialMediaTemplate } from './components/SocialMediaTemplate/SocialMediaTemplate.vue'
 export { default as NexxtSocialMediaType } from './components/SocialMediaType/SocialMediaType.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'
+export { default as NexxtTabs } from './components/Tabs/Tabs.vue'
 export { default as NexxtTimelineEvent } from './components/TimelineEvent/TimelineEvent.vue'
 export { default as NexxtTimelinePhaseblock } from './components/TimelinePhaseblock/TimelinePhaseblock.vue'
 export { default as NexxtTooltip } from './components/Tooltip/Tooltip.vue'