@meistrari/tela-build 1.44.0 → 1.46.0

package/components/tela/heading-tabs/heading-tabs.mdx

@@ -0,0 +1,99 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as HeadingTabsStories from './heading-tabs.stories.ts';
+
+<Meta of={HeadingTabsStories} />
+
+# TelaHeadingTabs
+
+A heading-styled tab switcher. Each option renders as a heading-typography button (`md` → `heading-h3-semibold`, `lg` → `heading-h2-semibold`) — the active tab in `text-primary`, inactive tabs in `text-tertiary` with a hover transition to `text-secondary`. Use it to switch between sections or lists where the tabs double as section headings (e.g. a dashboard's "Recents / Team activity / Favorites").
+
+This is distinct from `TelaTabs` (the small, underlined Reka-based tab bar with an indicator) and `TelaSegmentToggle` (the pill segmented control). Reach for `TelaHeadingTabs` when the tabs themselves are the page's section headings.
+
+## Examples
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const selectedTab = ref('recents')
+const options = [
+  { tab: 'recents', label: 'Recents' },
+  { tab: 'everyone', label: 'Team activity' },
+  { tab: 'favorites', label: 'Favorites' }
+]
+</script>
+
+<template>
+  <TelaHeadingTabs v-model="selectedTab" :options="options" />
+</template>
+```
+
+### Heading Sizes
+
+```vue
+<!-- Default (md) → heading-h3-semibold -->
+<TelaHeadingTabs v-model="selectedTab" :options="options" />
+
+<!-- Larger (lg) → heading-h2-semibold -->
+<TelaHeadingTabs v-model="selectedTab" :options="options" size="lg" />
+```
+
+### Conditionally Hidden Tab
+
+Use the per-option `hidden` flag instead of conditionally building the array — keeps the tab list stable and the markup declarative.
+
+```vue
+<TelaHeadingTabs
+  v-model="selectedTab"
+  :options="[
+    { tab: 'recents', label: 'Recents' },
+    { tab: 'everyone', label: 'Team activity' },
+    { tab: 'favorites', label: 'Favorites', hidden: !hasFavorites }
+  ]"
+/>
+```
+
+### Custom Styling
+
+```vue
+<TelaHeadingTabs
+  v-model="selectedTab"
+  :options="options"
+  class="gap-6"
+  tab-class="uppercase"
+/>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+interface HeadingTabsOption {
+  tab: string
+  label: string
+  hidden?: boolean
+}
+
+type HeadingTabsProps = {
+  modelValue: string
+  options: HeadingTabsOption[]
+  size?: 'md' | 'lg'
+  class?: string
+  tabClass?: string
+}
+```
+
+## Events
+
+- `update:modelValue` - Emitted when a tab is selected with the new tab value (via `v-model`)
+
+## Features
+
+- **Heading typography**: `md` → `heading-h3-semibold` (default), `lg` → `heading-h2-semibold`
+- **Active/inactive states**: `text-primary` active, `text-tertiary` inactive with hover to `text-secondary`
+- **v-model binding**: Two-way bound selected tab
+- **Per-option visibility**: Hide tabs declaratively with `hidden`
+- **Customizable**: Override container and per-button classes

package/components/tela/heading-tabs/heading-tabs.stories.ts

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, watch } from 'vue'
+
+import HeadingTabs from './heading-tabs.vue'
+
+const meta: Meta<typeof HeadingTabs> = {
+    title: 'Core/HeadingTabs',
+    component: HeadingTabs,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A heading-styled tab switcher. Renders each option as a heading-typography button, with the active tab in `text-primary` and inactive tabs in `text-tertiary`. Useful for switching between sections or lists on a dashboard where the tabs double as section headings. Supports v-model binding, two heading sizes (`md` → `heading-h3-semibold`, `lg` → `heading-h2-semibold`), and per-option `hidden`.',
+            },
+        },
+    },
+    argTypes: {
+        modelValue: {
+            control: 'text',
+            description: 'The currently selected tab value (v-model).',
+        },
+        options: {
+            control: 'object',
+            description: 'Array of tab options. Each option has a `tab` (value), `label`, and optional `hidden` flag.',
+        },
+        size: {
+            control: 'select',
+            options: ['md', 'lg'],
+            description: 'Heading size. `md` → `heading-h3-semibold` (default), `lg` → `heading-h2-semibold`.',
+        },
+        class: {
+            control: 'text',
+            description: 'Custom CSS classes applied to the tabs container.',
+        },
+        tabClass: {
+            control: 'text',
+            description: 'Custom CSS classes applied to each tab button.',
+        },
+    },
+    args: {
+        options: [
+            { tab: 'recents', label: 'Recents' },
+            { tab: 'everyone', label: 'Team activity' },
+            { tab: 'favorites', label: 'Favorites' },
+        ],
+        modelValue: 'recents',
+        size: 'md',
+    },
+    render: (args) => {
+        return {
+            components: { HeadingTabs },
+            setup() {
+                const value = ref<string>(args.modelValue || '')
+
+                watch(
+                    () => args.modelValue,
+                    (val) => {
+                        value.value = val || ''
+                    },
+                )
+
+                return { args, value }
+            },
+            template: `
+                <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
+                    <HeadingTabs
+                        v-model="value"
+                        :options="args.options"
+                        :size="args.size"
+                        :class="args.class"
+                        :tab-class="args.tabClass"
+                    />
+                    <div style="font-family: monospace; font-size: 12px;">Selected: {{ value }}</div>
+                </div>
+            `,
+        }
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Large: Story = {
+    args: {
+        size: 'lg',
+    },
+}
+
+export const TwoTabs: Story = {
+    args: {
+        options: [
+            { tab: 'recents', label: 'Recents' },
+            { tab: 'everyone', label: 'Team activity' },
+        ],
+        modelValue: 'recents',
+    },
+}
+
+export const WithHiddenTab: Story = {
+    args: {
+        options: [
+            { tab: 'recents', label: 'Recents' },
+            { tab: 'everyone', label: 'Team activity' },
+            { tab: 'favorites', label: 'Favorites', hidden: true },
+        ],
+        modelValue: 'recents',
+    },
+}

package/components/tela/heading-tabs/heading-tabs.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+interface Option {
+    tab: string
+    label: string
+    hidden?: boolean
+}
+
+const props = withDefaults(defineProps<{
+    options: Option[]
+    size?: 'md' | 'lg'
+    class?: HTMLAttributes['class']
+    tabClass?: HTMLAttributes['class']
+}>(), {
+    size: 'md',
+})
+
+const selectedTab = defineModel<string>({ required: true })
+
+const headingClass = computed(() => props.size === 'lg' ? 'heading-h2-semibold' : 'heading-h3-semibold')
+
+const visibleOptions = computed(() => props.options.filter(option => !option.hidden))
+
+function selectTab(tab: string) {
+    selectedTab.value = tab
+}
+</script>
+
+<template>
+    <div :class="cn('flex items-center gap-[12px]', props.class)">
+        <button
+            v-for="option in visibleOptions"
+            :key="option.tab"
+            type="button"
+            :class="cn(
+                headingClass,
+                selectedTab === option.tab ? 'text-primary' : 'text-tertiary duration-120 hover:text-secondary',
+                props.tabClass,
+            )"
+            @click="selectTab(option.tab)"
+        >
+            {{ option.label }}
+        </button>
+    </div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.44.0",
+  "version": "1.46.0",
   "type": "module",
   "files": [
     "app.config.ts",

package/plugins/test-id.ts

@@ -1,4 +1,3 @@
-import type { DirectiveBinding } from 'vue'
 import { defineNuxtPlugin } from 'nuxt/app'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -6,20 +5,20 @@ export default defineNuxtPlugin((nuxtApp) => {
         return
     }
 
-    function updateTestId(el: HTMLElement, binding: DirectiveBinding<unknown>) {
-        if (binding.value === undefined || binding.value === null || binding.value === '') {
+    function updateTestId(el: HTMLElement, value: unknown) {
+        if (value === undefined || value === null || value === '') {
             el.removeAttribute('data-testid')
             return
         }
 
-        el.setAttribute('data-testid', String(binding.value))
+        el.setAttribute('data-testid', String(value))
     }
 
     nuxtApp.vueApp.directive('test', {
-        created: updateTestId,
+        created: (el, binding) => updateTestId(el, binding.value),
         updated(el, binding) {
             if (binding.value !== binding.oldValue) {
-                updateTestId(el, binding)
+                updateTestId(el, binding.value)
             }
         },
     })