@nexxtmove/ui 1.2.7 → 1.2.8

package/package.json

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

package/src/assets/svg/funda.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.8008 14.123C19.6828 18.3033 15.8964 21.2118 11.5684 21.2119H0.0214844L3.24121 9.16992C4.35937 4.98987 8.14668 2.0822 12.4736 2.08203H24.0215L20.8008 14.123ZM12.4756 3.97168C9.00358 3.97188 5.96564 6.30521 5.06836 9.65918L2.4834 19.3232H11.5664C15.0385 19.3232 18.0763 16.9897 18.9736 13.6357L21.5586 3.97168H12.4756Z" fill="currentColor"/>
+<path d="M14.7658 6.12038C14.7705 6.10214 14.7571 6.08487 14.7389 6.08487H13.8109C13.1909 6.08487 12.6688 6.13669 12.2456 6.24034C11.8319 6.34399 11.4989 6.52249 11.2446 6.77585C10.9999 7.02057 10.8214 7.34878 10.7091 7.76241C10.6055 8.17602 10.5536 8.69334 10.5536 9.31326V9.5532C10.5536 9.56856 10.5412 9.58104 10.5258 9.58104H9.32719C9.31183 9.58104 9.29935 9.59352 9.29935 9.60888V11.3008C9.29935 11.3162 9.31183 11.3287 9.32719 11.3287H10.5258C10.5412 11.3287 10.5536 11.3411 10.5536 11.3564V17.1655C10.5536 17.1808 10.5661 17.1933 10.5815 17.1933H12.4567C12.4721 17.1933 12.4846 17.1808 12.4846 17.1655V11.3564C12.4846 11.3411 12.497 11.3287 12.5124 11.3287H14.2888C14.3041 11.3287 14.3166 11.3162 14.3166 11.3008V9.60888C14.3166 9.59352 14.3041 9.58104 14.2888 9.58104H12.5124C12.497 9.58104 12.4846 9.56856 12.4846 9.5532V9.21444C12.4846 8.92266 12.499 8.69238 12.5267 8.52342C12.5546 8.34492 12.6208 8.20866 12.7244 8.11464C12.8377 8.01097 12.9922 7.94572 13.1899 7.91692C13.3876 7.87949 13.6553 7.8603 13.9932 7.8603H14.2955C14.308 7.8603 14.3195 7.85167 14.3224 7.83919L14.7648 6.11942L14.7658 6.12038Z" fill="currentColor"/>
+</svg>

package/src/components/Icon/Icon.vue

@@ -2,11 +2,14 @@
 import { computed } from 'vue'
 import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
 import { brandIconNames } from './brandIconNames'
+import { customIcons, type CustomIconName } from './customIcons'
 
 export type IconType = 'regular' | 'solid' | 'light' | 'duotone'
+// every name Icon accepts: the Font Awesome kit plus the local SVGs
+export type NexxtIconName = IconName | CustomIconName
 
 interface NexxtIconProps {
-  name: IconName
+  name: NexxtIconName
   type?: IconType
 }
 
@@ -16,9 +19,20 @@ defineOptions({
 
 const props = defineProps<NexxtIconProps>()
 
-const type = computed(() => props.type ?? (brandIconNames.has(props.name) ? 'brands' : 'light'))
+// brand icons without a Font Awesome equivalent, sized and coloured like the font ones
+const custom = computed(() => customIcons[props.name as CustomIconName])
+
+const type = computed(
+  () => props.type ?? (brandIconNames.has(props.name as IconName) ? 'brands' : 'light'),
+)
 </script>
 
 <template>
-  <i :class="[`fa-${type}`, `fa-${name}`, 'items-center', 'justify-center']" />
+  <component
+    :is="custom"
+    v-if="custom"
+    aria-hidden="true"
+    class="inline-block size-[1em] fill-current align-[-0.125em]"
+  />
+  <i v-else :class="[`fa-${type}`, `fa-${name}`, 'items-center', 'justify-center']" />
 </template>

package/src/components/Icon/customIcons.ts

@@ -0,0 +1,8 @@
+import FundaSvg from '@ui-assets/svg/funda.svg'
+
+// Brand icons that Font Awesome doesn't ship, rendered from local SVGs instead.
+export const customIcons = {
+  funda: FundaSvg,
+}
+
+export type CustomIconName = keyof typeof customIcons

package/src/components/Tabs/Tabs.vue

@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { ref, useTemplateRef, watch, onMounted, nextTick } from 'vue'
+import { computed, ref, useTemplateRef, watch, onMounted, nextTick } from 'vue'
+import Icon, { type NexxtIconName } from '../Icon/Icon.vue'
+
+export interface NexxtTabItem {
+  label: string
+  icon?: NexxtIconName
+}
 
 interface NexxtTabs {
-  tabs: string[]
+  tabs: (string | NexxtTabItem)[]
   tablistLabel?: string
 }
 
@@ -20,9 +26,14 @@ const sliderStyle = ref({ width: '0px', transform: 'translateX(0px)' })
 const clipPath = ref('inset(0 100% 0 0 round 9999px)')
 const ready = ref(false)
 
+// plain strings and { label, icon } objects are both accepted; work with the object form
+const items = computed<NexxtTabItem[]>(() =>
+  props.tabs.map((tab) => (typeof tab === 'string' ? { label: tab } : tab)),
+)
+
 const updateSlider = async () => {
   await nextTick()
-  const index = props.tabs.indexOf(selected.value)
+  const index = items.value.findIndex((item) => item.label === selected.value)
   const button = buttonRefs.value[index]
   if (!button || !containerRef.value) return
 
@@ -40,23 +51,28 @@ const updateSlider = async () => {
 
 const onKeydown = (event: KeyboardEvent, index: number) => {
   let next: number
-  if (event.key === 'ArrowRight') next = (index + 1) % props.tabs.length
-  else if (event.key === 'ArrowLeft') next = (index - 1 + props.tabs.length) % props.tabs.length
+  if (event.key === 'ArrowRight') next = (index + 1) % items.value.length
+  else if (event.key === 'ArrowLeft') next = (index - 1 + items.value.length) % items.value.length
   else if (event.key === 'Home') next = 0
-  else if (event.key === 'End') next = props.tabs.length - 1
+  else if (event.key === 'End') next = items.value.length - 1
   else return
 
   event.preventDefault()
-  selected.value = props.tabs[next]
+  selected.value = items.value[next].label
   buttonRefs.value[next]?.focus()
 }
 
 watch(selected, async () => await updateSlider())
 
+// the overlay copy must stay the same width as the button, so re-measure when the tabs change
+watch(items, async () => await updateSlider())
+
 onMounted(async () => {
   await document.fonts.ready
   await updateSlider()
   await nextTick()
+
+  void containerRef.value?.offsetWidth
   ready.value = true
 })
 </script>
@@ -66,47 +82,55 @@ onMounted(async () => {
     ref="containerRef"
     role="tablist"
     :aria-label="tablistLabel"
-    class="relative isolate flex rounded-full border-4 border-white bg-white"
+    class="relative isolate flex rounded-full bg-white p-1"
   >
-    <!-- slider pill -->
+    <!-- slider pill; anchored to the padding box, the origin button.offsetLeft is measured from -->
     <div
       aria-hidden="true"
-      class="absolute h-9 rounded-full bg-cornflower-blue-500"
+      class="absolute inset-y-1 left-0 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"
+      v-for="(item, index) in items"
+      :key="item.label"
       :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
       role="tab"
-      :aria-selected="selected === tab"
-      :tabindex="selected === tab ? 0 : -1"
-      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"
+      :aria-selected="selected === item.label"
+      :tabindex="selected === item.label ? 0 : -1"
+      class="relative z-10 inline-flex h-9 cursor-pointer items-center gap-2 rounded-full px-4 small-normal"
+      :class="[
+        // the dark label is what the pill wipe reveals, so it only drops out once the pill
+        // has arrived — otherwise its anti-aliased edges halo around the white copy
+        selected === item.label ? 'text-transparent' : 'text-gray-950',
+        ready ? 'transition-colors duration-0' : '',
+        selected === item.label ? 'delay-500' : 'delay-0',
+      ]"
+      @click="selected = item.label"
       @keydown="onKeydown($event, index)"
     >
-      {{ tab }}
+      <Icon v-if="item.icon" :name="item.icon" aria-hidden="true" class="body-normal" />
+      {{ item.label }}
     </button>
 
-    <!-- white text overlay, clipped to slider bounds -->
+    <!-- white text overlay, clipped to slider bounds; must mirror the buttons exactly -->
     <div
       aria-hidden="true"
-      class="pointer-events-none absolute inset-0 z-20 flex"
+      class="pointer-events-none absolute inset-0 z-20 flex p-1"
       :class="
-        ready ? 'transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]' : ''
+        ready ? 'transition-[clip-path] duration-300 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"
+        v-for="item in items"
+        :key="item.label"
+        class="flex h-9 items-center gap-2 rounded-full px-4 small-normal text-white"
       >
-        {{ tab }}
+        <Icon v-if="item.icon" :name="item.icon" class="body-normal" />
+        {{ item.label }}
       </span>
     </div>
   </div>