@nexxtmove/ui 1.47.0 → 1.49.0

package/dist/nuxt.js

@@ -64,6 +64,7 @@ var s = {
 	NexxtDropdownButton: "components/organisms/DropdownButton/DropdownButton.vue",
 	NexxtFontPicker: "components/organisms/FontPicker/FontPicker.vue",
 	NexxtHeader: "components/organisms/Header/Header.vue",
+	NexxtIconPicker: "components/organisms/IconPicker/IconPicker.vue",
 	NexxtModal: "components/organisms/Modal/Modal.vue",
 	NexxtPickerPanel: "components/organisms/PickerPanel/PickerPanel.vue",
 	NexxtProgressBar: "components/organisms/ProgressBar/ProgressBar.vue",

package/package.json

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

package/src/components/molecules/Tabs/Tabs.vue

@@ -1,15 +1,27 @@
 <script lang="ts" setup>
-import { computed, ref, useTemplateRef, watch, onMounted, nextTick } from 'vue'
+import { computed, ref, useTemplateRef, watch, watchEffect, onMounted, nextTick } from 'vue'
 import Icon, { type NexxtIconName } from '../../atoms/Icon/Icon.vue'
 
 export interface NexxtTabItem {
+  /** Visible text, the `v-model` value and the key; in icon-only mode the tab's accessible name. */
   label: string
+  /** Icon shown before the label, or on its own in icon-only mode. */
   icon?: NexxtIconName
+  /** Show only the icon for this tab. Overrides the tabs-wide `iconOnly` either way. */
+  iconOnly?: boolean
 }
 
 interface NexxtTabs {
+  /** The tabs, as plain labels or `{ label, icon, iconOnly }` objects. */
   tabs: (string | NexxtTabItem)[]
+  /** Accessible name of the tablist. */
   tablistLabel?: string
+  /**
+   * Show only the icon of every tab, as a near-square button. The label stays the `v-model`
+   * value and the accessible name, in a visually hidden span. A tab without an `icon` keeps its
+   * visible label.
+   */
+  iconOnly?: boolean
 }
 
 defineOptions({
@@ -31,15 +43,47 @@ const items = computed<NexxtTabItem[]>(() =>
   props.tabs.map((tab) => (typeof tab === 'string' ? { label: tab } : tab)),
 )
 
+const wantsIconOnly = (item: NexxtTabItem) => item.iconOnly ?? props.iconOnly ?? false
+
+interface TabView extends NexxtTabItem {
+  compact: boolean
+  /** The visible label; empty in icon-only mode, where it moves to a visually hidden span. */
+  text: string
+  spacing: string
+}
+
+// icon-only needs an icon to show; without one the tab falls back to its visible label. The
+// labelled tab keeps `text` as the same bare text node it always was, so its markup is unchanged
+const views = computed<TabView[]>(() =>
+  items.value.map((item) => {
+    const compact = Boolean(item.icon) && wantsIconOnly(item)
+    return {
+      ...item,
+      compact,
+      text: compact ? '' : item.label,
+      spacing: compact ? 'px-3' : 'gap-2 px-4',
+    }
+  }),
+)
+
 const updateSlider = async () => {
   await nextTick()
   const index = items.value.findIndex((item) => item.label === selected.value)
   const button = buttonRefs.value[index]
   if (!button || !containerRef.value) return
 
-  const left = button.offsetLeft
-  const width = button.offsetWidth
-  const right = containerRef.value.offsetWidth - left - width
+  // offsetLeft/offsetWidth round to whole pixels while label and icon widths are fractional, which
+  // left the pill up to half a pixel off its tab. The rects are exact but include any ancestor
+  // transform (a modal scaling in), so they are divided back to layout pixels
+  const container = containerRef.value
+  const box = container.getBoundingClientRect()
+  const target = button.getBoundingClientRect()
+  const layoutWidth = parseFloat(getComputedStyle(container).width)
+  const scale = layoutWidth > 0 && box.width > 0 ? box.width / layoutWidth : 1
+
+  const left = (target.left - box.left) / scale
+  const width = target.width / scale
+  const right = box.width / scale - left - width
 
   sliderStyle.value = {
     width: `${width}px`,
@@ -64,8 +108,21 @@ const onKeydown = (event: KeyboardEvent, index: number) => {
 
 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())
+// the overlay copy must stay the same width as the button, so re-measure whenever a tab's width
+// can change: new tabs, or a switch between icon-only and labelled
+watch(views, async () => await updateSlider())
+
+// `process.env.NODE_ENV` stays in the library build, so the consumer's bundler decides whether
+// this runs (as in NexxtIconPicker)
+if (process.env.NODE_ENV !== 'production') {
+  watchEffect(() => {
+    const missing = items.value.filter((item) => !item.icon && wantsIconOnly(item))
+    if (missing.length) {
+      const labels = missing.map((item) => `"${item.label}"`).join(', ')
+      console.warn(`[NexxtTabs] icon-only tab without an \`icon\` shows its label: ${labels}.`)
+    }
+  })
+}
 
 onMounted(async () => {
   await document.fonts.ready
@@ -94,14 +151,15 @@ onMounted(async () => {
 
     <!-- dark text buttons -->
     <button
-      v-for="(item, index) in items"
+      v-for="(item, index) in views"
       :key="item.label"
       :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
       role="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="relative z-10 inline-flex h-9 cursor-pointer items-center rounded-full small-normal"
       :class="[
+        item.spacing,
         // 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',
@@ -111,8 +169,12 @@ onMounted(async () => {
       @click="selected = item.label"
       @keydown="onKeydown($event, index)"
     >
-      <Icon v-if="item.icon" :name="item.icon" aria-hidden="true" class="body-normal" />
-      {{ item.label }}
+      <template v-if="item.compact && item.icon">
+        <Icon :name="item.icon" aria-hidden="true" class="body-normal" />
+        <span class="sr-only">{{ item.label }}</span>
+      </template>
+      <Icon v-else-if="item.icon" :name="item.icon" aria-hidden="true" class="body-normal" />
+      {{ item.text }}
     </button>
 
     <!-- white text overlay, clipped to slider bounds; must mirror the buttons exactly -->
@@ -125,12 +187,13 @@ onMounted(async () => {
       :style="{ clipPath }"
     >
       <span
-        v-for="item in items"
+        v-for="item in views"
         :key="item.label"
-        class="flex h-9 items-center gap-2 rounded-full px-4 small-normal text-white"
+        class="flex h-9 items-center rounded-full small-normal text-white"
+        :class="item.spacing"
       >
         <Icon v-if="item.icon" :name="item.icon" class="body-normal" />
-        {{ item.label }}
+        {{ item.text }}
       </span>
     </div>
   </div>