@birdycom/omniaui-vue 0.11.0 → 0.11.1

package/src/blocks/OcBlockWizardDialog.vue

@@ -1,67 +1,67 @@
-<script setup lang="ts">
-/**
- * Modal wizard: stepper rail on the left, step content and a Back / Next footer.
- * v-model:open opens the dialog, v-model:step is the active step index. Emits `finish` on the last step's button.
- * Slots: step-<index> (or default, scoped: { step, index }) for the content of each step.
- * Classes: dialog.oc-modal > .oc-modal-content--xl, .oc-block-wizard(-rail/-main/-step), .oc-stepper, .oc-modal-footer
- */
-import { computed, ref } from 'vue'
-import OcStepper from '../components/OcStepper.vue'
-import { useDialog } from '../composables/useDialog'
-import { useUid } from '../composables/useUid'
-
-const props = withDefaults(
-  defineProps<{
-    steps: { label: string }[]
-    backLabel?: string
-    nextLabel?: string
-    finishLabel?: string
-    stepsLabel?: string
-    /** Text for "Step 2 of 3"; receives the 1-based index and the count */
-    stepText?: (index: number, total: number) => string
-  }>(),
-  { backLabel: 'Back', nextLabel: 'Next', finishLabel: 'Finish', stepsLabel: 'Setup steps' },
-)
-const emit = defineEmits<{ finish: [] }>()
-const open = defineModel<boolean>('open', { default: false })
-const step = defineModel<number>('step', { default: 0 })
-const el = ref<HTMLDialogElement | null>(null)
-const { onClose } = useDialog(open, el)
-const titleId = useUid('oc-wizard-title')
-const last = computed(() => step.value >= props.steps.length - 1)
-const description = computed(() => (props.stepText ?? ((i, n) => `Step ${i} of ${n}`))(step.value + 1, props.steps.length))
-
-function next() {
-  if (last.value) {
-    emit('finish')
-    open.value = false
-  } else {
-    step.value++
-  }
-}
-</script>
-
-<template>
-  <dialog ref="el" class="oc-modal" closedby="closerequest" :aria-labelledby="titleId" @close="onClose">
-    <div class="oc-modal-content oc-modal-content--xl">
-      <div class="oc-block-wizard">
-        <div class="oc-block-wizard-rail">
-          <OcStepper v-model="step" :steps="steps" :label="stepsLabel" />
-        </div>
-        <div class="oc-block-wizard-main">
-          <div class="oc-modal-header">
-            <h2 :id="titleId" class="oc-modal-title">{{ steps[step]?.label }}</h2>
-            <p class="oc-modal-description">{{ description }}</p>
-          </div>
-          <div class="oc-block-wizard-step">
-            <slot :name="`step-${step}`" :step="steps[step]" :index="step"><slot :step="steps[step]" :index="step" /></slot>
-          </div>
-          <div class="oc-modal-footer">
-            <button class="oc-btn oc-btn--outline" type="button" :disabled="step === 0" @click="step--">{{ backLabel }}</button>
-            <button class="oc-btn" type="button" @click="next">{{ last ? finishLabel : nextLabel }}</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </dialog>
-</template>
+<script setup lang="ts">
+/**
+ * Modal wizard: stepper rail on the left, step content and a Back / Next footer.
+ * v-model:open opens the dialog, v-model:step is the active step index. Emits `finish` on the last step's button.
+ * Slots: step-<index> (or default, scoped: { step, index }) for the content of each step.
+ * Classes: dialog.oc-modal > .oc-modal-content--xl, .oc-block-wizard(-rail/-main/-step), .oc-stepper, .oc-modal-footer
+ */
+import { computed, ref } from 'vue'
+import OcStepper from '../components/OcStepper.vue'
+import { useDialog } from '../composables/useDialog'
+import { useUid } from '../composables/useUid'
+
+const props = withDefaults(
+  defineProps<{
+    steps: { label: string }[]
+    backLabel?: string
+    nextLabel?: string
+    finishLabel?: string
+    stepsLabel?: string
+    /** Text for "Step 2 of 3"; receives the 1-based index and the count */
+    stepText?: (index: number, total: number) => string
+  }>(),
+  { backLabel: 'Back', nextLabel: 'Next', finishLabel: 'Finish', stepsLabel: 'Setup steps' },
+)
+const emit = defineEmits<{ finish: [] }>()
+const open = defineModel<boolean>('open', { default: false })
+const step = defineModel<number>('step', { default: 0 })
+const el = ref<HTMLDialogElement | null>(null)
+const { onClose } = useDialog(open, el)
+const titleId = useUid('oc-wizard-title')
+const last = computed(() => step.value >= props.steps.length - 1)
+const description = computed(() => (props.stepText ?? ((i, n) => `Step ${i} of ${n}`))(step.value + 1, props.steps.length))
+
+function next() {
+  if (last.value) {
+    emit('finish')
+    open.value = false
+  } else {
+    step.value++
+  }
+}
+</script>
+
+<template>
+  <dialog ref="el" class="oc-modal" closedby="closerequest" :aria-labelledby="titleId" @close="onClose">
+    <div class="oc-modal-content oc-modal-content--xl">
+      <div class="oc-block-wizard">
+        <div class="oc-block-wizard-rail">
+          <OcStepper v-model="step" :steps="steps" :label="stepsLabel" />
+        </div>
+        <div class="oc-block-wizard-main">
+          <div class="oc-modal-header">
+            <h2 :id="titleId" class="oc-modal-title">{{ steps[step]?.label }}</h2>
+            <p class="oc-modal-description">{{ description }}</p>
+          </div>
+          <div class="oc-block-wizard-step">
+            <slot :name="`step-${step}`" :step="steps[step]" :index="step"><slot :step="steps[step]" :index="step" /></slot>
+          </div>
+          <div class="oc-modal-footer">
+            <button class="oc-btn oc-btn--outline" type="button" :disabled="step === 0" @click="step--">{{ backLabel }}</button>
+            <button class="oc-btn" type="button" @click="next">{{ last ? finishLabel : nextLabel }}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>

package/src/components/OcAccordion.vue

@@ -1,12 +1,12 @@
-<script setup lang="ts">
-/** Exclusive accordion on <details name>. Put OcAccordionItem children inside; they share one group name. */
-import { provide } from 'vue'
-import { useUid } from '../composables/useUid'
-
-const props = defineProps<{ name?: string }>()
-provide('oc-accordion-name', props.name ?? useUid('oc-accordion'))
-</script>
-
-<template>
-  <div class="oc-accordion"><slot /></div>
-</template>
+<script setup lang="ts">
+/** Exclusive accordion on <details name>. Put OcAccordionItem children inside; they share one group name. */
+import { provide } from 'vue'
+import { useUid } from '../composables/useUid'
+
+const props = defineProps<{ name?: string }>()
+provide('oc-accordion-name', props.name ?? useUid('oc-accordion'))
+</script>
+
+<template>
+  <div class="oc-accordion"><slot /></div>
+</template>

package/src/components/OcAccordionAccent.vue

@@ -1,27 +1,27 @@
-<!-- File: packages/vue/src/components/OcAccordionAccent.vue | Map: div.oc-accordion.oc-accordion--accent (+ color classes) -> OcAccordionItem children -->
-<script setup lang="ts">
-/**
- * Accent accordion: separate item cards with a colored start edge. Put OcAccordionItem children inside;
- * they share one group name (like OcAccordion). Color one item with class "oc-accent--violet" or "oc-accordion-item--warning".
- * Classes: .oc-accordion--accent, .oc-accent--*, .oc-accordion--success/--warning/--danger, .oc-accordion--flush, .oc-accordion-accent-meta
- */
-import { provide } from 'vue'
-import { useUid } from '../composables/useUid'
-
-const props = defineProps<{
-  name?: string
-  /** Color preset for all items. */
-  accent?: 'blue' | 'cyan' | 'green' | 'orange' | 'red' | 'violet' | 'yellow'
-  /** Semantic color for all items. */
-  tone?: 'success' | 'warning' | 'danger'
-  flush?: boolean
-}>()
-// Same key as OcAccordion, so OcAccordionItem picks up the group name.
-provide('oc-accordion-name', props.name ?? useUid('oc-accordion'))
-</script>
-
-<template>
-  <div :class="['oc-accordion', 'oc-accordion--accent', flush && 'oc-accordion--flush', accent && `oc-accent--${accent}`, tone && `oc-accordion--${tone}`]">
-    <slot />
-  </div>
-</template>
+<!-- File: packages/vue/src/components/OcAccordionAccent.vue | Map: div.oc-accordion.oc-accordion--accent (+ color classes) -> OcAccordionItem children -->
+<script setup lang="ts">
+/**
+ * Accent accordion: separate item cards with a colored start edge. Put OcAccordionItem children inside;
+ * they share one group name (like OcAccordion). Color one item with class "oc-accent--violet" or "oc-accordion-item--warning".
+ * Classes: .oc-accordion--accent, .oc-accent--*, .oc-accordion--success/--warning/--danger, .oc-accordion--flush, .oc-accordion-accent-meta
+ */
+import { provide } from 'vue'
+import { useUid } from '../composables/useUid'
+
+const props = defineProps<{
+  name?: string
+  /** Color preset for all items. */
+  accent?: 'blue' | 'cyan' | 'green' | 'orange' | 'red' | 'violet' | 'yellow'
+  /** Semantic color for all items. */
+  tone?: 'success' | 'warning' | 'danger'
+  flush?: boolean
+}>()
+// Same key as OcAccordion, so OcAccordionItem picks up the group name.
+provide('oc-accordion-name', props.name ?? useUid('oc-accordion'))
+</script>
+
+<template>
+  <div :class="['oc-accordion', 'oc-accordion--accent', flush && 'oc-accordion--flush', accent && `oc-accent--${accent}`, tone && `oc-accordion--${tone}`]">
+    <slot />
+  </div>
+</template>

package/src/components/OcAccordionItem.vue

@@ -1,19 +1,19 @@
-<script setup lang="ts">
-/** One accordion section (details/summary). v-model:open; default slot = content, `title` prop or slot = trigger. */
-import { inject } from 'vue'
-
-defineProps<{ title?: string }>()
-const open = defineModel<boolean>('open', { default: false })
-const name = inject<string | undefined>('oc-accordion-name', undefined)
-
-function onToggle(e: Event) {
-  open.value = (e.target as HTMLDetailsElement).open
-}
-</script>
-
-<template>
-  <details class="oc-accordion-item" :name="name" :open="open" @toggle="onToggle">
-    <summary class="oc-accordion-trigger"><slot name="title">{{ title }}</slot></summary>
-    <div class="oc-accordion-content"><slot /></div>
-  </details>
-</template>
+<script setup lang="ts">
+/** One accordion section (details/summary). v-model:open; default slot = content, `title` prop or slot = trigger. */
+import { inject } from 'vue'
+
+defineProps<{ title?: string }>()
+const open = defineModel<boolean>('open', { default: false })
+const name = inject<string | undefined>('oc-accordion-name', undefined)
+
+function onToggle(e: Event) {
+  open.value = (e.target as HTMLDetailsElement).open
+}
+</script>
+
+<template>
+  <details class="oc-accordion-item" :name="name" :open="open" @toggle="onToggle">
+    <summary class="oc-accordion-trigger"><slot name="title">{{ title }}</slot></summary>
+    <div class="oc-accordion-content"><slot /></div>
+  </details>
+</template>

package/src/components/OcAffixInput.vue

@@ -1,40 +1,40 @@
-<!-- File: packages/vue/src/components/OcAffixInput.vue | Map: props -> variant presets -> template (input group --affix with inline symbol) -->
-<script setup lang="ts">
-/**
- * Input with a symbol inside the frame. variant: currency (€), percent (%) or email (@); or own prefix / suffix (props or slots).
- * Same markup as packages/ui/snippets/affix-input.html. v-model: string.
- * class/style stay on the wrapper, other attributes go to the input.
- */
-import { computed } from 'vue'
-import { useAttrsSplit } from '../composables/useAttrsSplit'
-
-export type AffixInputKind = 'currency' | 'percent' | 'email'
-
-defineOptions({ inheritAttrs: false })
-// alignEnd defaults to undefined (not false), so the variant preset can decide.
-const props = withDefaults(defineProps<{ variant?: AffixInputKind; prefix?: string; suffix?: string; alignEnd?: boolean; error?: boolean }>(), {
-  alignEnd: undefined,
-})
-const model = defineModel<string>({ default: '' })
-const { root, control } = useAttrsSplit()
-
-// Preset per variant. Email uses type="email" so :user-invalid checks the address.
-const PRESETS = {
-  currency: { prefix: '\u20AC', suffix: undefined, end: false, input: { type: 'text', inputmode: 'decimal' } },
-  percent: { prefix: '%', suffix: undefined, end: false, input: { type: 'text', inputmode: 'decimal' } },
-  email: { prefix: '@', suffix: undefined, end: false, input: { type: 'email', autocomplete: 'email' } },
-} as const
-
-const preset = computed(() => (props.variant ? PRESETS[props.variant] : undefined))
-const before = computed(() => props.prefix ?? preset.value?.prefix)
-const after = computed(() => props.suffix ?? preset.value?.suffix)
-const end = computed(() => props.alignEnd ?? preset.value?.end ?? false)
-</script>
-
-<template>
-  <div v-bind="root" :class="['oc-input-group', 'oc-input-group--affix', end && 'oc-input-group--end', error && 'oc-input-group--error']">
-    <span v-if="before || $slots.prefix" class="oc-input-addon" aria-hidden="true"><slot name="prefix">{{ before }}</slot></span>
-    <input v-bind="{ type: 'text', ...preset?.input, ...control }" v-model="model" class="oc-input" :aria-invalid="error ? 'true' : undefined" />
-    <span v-if="after || $slots.suffix" class="oc-input-addon" aria-hidden="true"><slot name="suffix">{{ after }}</slot></span>
-  </div>
-</template>
+<!-- File: packages/vue/src/components/OcAffixInput.vue | Map: props -> variant presets -> template (input group --affix with inline symbol) -->
+<script setup lang="ts">
+/**
+ * Input with a symbol inside the frame. variant: currency (€), percent (%) or email (@); or own prefix / suffix (props or slots).
+ * Same markup as packages/ui/snippets/affix-input.html. v-model: string.
+ * class/style stay on the wrapper, other attributes go to the input.
+ */
+import { computed } from 'vue'
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+
+export type AffixInputKind = 'currency' | 'percent' | 'email'
+
+defineOptions({ inheritAttrs: false })
+// alignEnd defaults to undefined (not false), so the variant preset can decide.
+const props = withDefaults(defineProps<{ variant?: AffixInputKind; prefix?: string; suffix?: string; alignEnd?: boolean; error?: boolean }>(), {
+  alignEnd: undefined,
+})
+const model = defineModel<string>({ default: '' })
+const { root, control } = useAttrsSplit()
+
+// Preset per variant. Email uses type="email" so :user-invalid checks the address.
+const PRESETS = {
+  currency: { prefix: '\u20AC', suffix: undefined, end: false, input: { type: 'text', inputmode: 'decimal' } },
+  percent: { prefix: '%', suffix: undefined, end: false, input: { type: 'text', inputmode: 'decimal' } },
+  email: { prefix: '@', suffix: undefined, end: false, input: { type: 'email', autocomplete: 'email' } },
+} as const
+
+const preset = computed(() => (props.variant ? PRESETS[props.variant] : undefined))
+const before = computed(() => props.prefix ?? preset.value?.prefix)
+const after = computed(() => props.suffix ?? preset.value?.suffix)
+const end = computed(() => props.alignEnd ?? preset.value?.end ?? false)
+</script>
+
+<template>
+  <div v-bind="root" :class="['oc-input-group', 'oc-input-group--affix', end && 'oc-input-group--end', error && 'oc-input-group--error']">
+    <span v-if="before || $slots.prefix" class="oc-input-addon" aria-hidden="true"><slot name="prefix">{{ before }}</slot></span>
+    <input v-bind="{ type: 'text', ...preset?.input, ...control }" v-model="model" class="oc-input" :aria-invalid="error ? 'true' : undefined" />
+    <span v-if="after || $slots.suffix" class="oc-input-addon" aria-hidden="true"><slot name="suffix">{{ after }}</slot></span>
+  </div>
+</template>

package/src/components/OcAlert.vue

@@ -1,17 +1,17 @@
-<script setup lang="ts">
-/** Alert. Classes: .oc-alert--info/success/warning/danger. Default slot = description. */
-withDefaults(
-  defineProps<{
-    variant?: 'info' | 'success' | 'warning' | 'danger'
-    title?: string
-  }>(),
-  { variant: 'info' },
-)
-</script>
-
-<template>
-  <div :class="['oc-alert', `oc-alert--${variant}`]" role="status">
-    <h4 v-if="title || $slots.title" class="oc-alert-title"><slot name="title">{{ title }}</slot></h4>
-    <p v-if="$slots.default" class="oc-alert-description"><slot /></p>
-  </div>
-</template>
+<script setup lang="ts">
+/** Alert. Classes: .oc-alert--info/success/warning/danger. Default slot = description. */
+withDefaults(
+  defineProps<{
+    variant?: 'info' | 'success' | 'warning' | 'danger'
+    title?: string
+  }>(),
+  { variant: 'info' },
+)
+</script>
+
+<template>
+  <div :class="['oc-alert', `oc-alert--${variant}`]" role="status">
+    <h4 v-if="title || $slots.title" class="oc-alert-title"><slot name="title">{{ title }}</slot></h4>
+    <p v-if="$slots.default" class="oc-alert-description"><slot /></p>
+  </div>
+</template>

package/src/components/OcAlertDialog.vue

@@ -1,66 +1,66 @@
-<script setup lang="ts">
-/**
- * Confirmation modal with a status icon. v-model:open. Emits `confirm` / `cancel` (both close the dialog).
- * Slots: icon, title, default (message), footer (scoped: { close }).
- * Classes: .oc-alert-dialog(--success/--error/--warning/--info/--question), .oc-alert-dialog-icon
- */
-import { computed, ref } from 'vue'
-import { useDialog } from '../composables/useDialog'
-import { useUid } from '../composables/useUid'
-
-const props = withDefaults(
-  defineProps<{
-    type?: 'success' | 'error' | 'warning' | 'info' | 'question'
-    title?: string
-    message?: string
-    confirmLabel?: string
-    cancelLabel?: string
-    /** Variant of the confirm button; defaults to destructive for warning/error. */
-    confirmVariant?: 'default' | 'destructive' | 'success'
-  }>(),
-  { type: 'warning', confirmLabel: 'Confirm', cancelLabel: 'Cancel' },
-)
-const emit = defineEmits<{ confirm: []; cancel: [] }>()
-const open = defineModel<boolean>('open', { default: false })
-const el = ref<HTMLDialogElement | null>(null)
-const { onClose } = useDialog(open, el)
-const titleId = useUid('oc-alert-dialog-title')
-const textId = `${titleId}-text`
-
-const glyphs = { success: '✓', error: '×', warning: '!', info: 'i', question: '?' } as const
-const variant = computed(() => props.confirmVariant ?? (props.type === 'warning' || props.type === 'error' ? 'destructive' : 'default'))
-const close = () => (open.value = false)
-
-function confirm() {
-  emit('confirm')
-  close()
-}
-function cancel() {
-  emit('cancel')
-  close()
-}
-</script>
-
-<template>
-  <dialog
-    ref="el"
-    class="oc-modal"
-    closedby="closerequest"
-    role="alertdialog"
-    :aria-labelledby="titleId"
-    :aria-describedby="textId"
-    @close="onClose"
-  >
-    <div :class="['oc-modal-content', 'oc-modal-content--sm', 'oc-alert-dialog', `oc-alert-dialog--${type}`]">
-      <span class="oc-alert-dialog-icon" aria-hidden="true"><slot name="icon">{{ glyphs[type] }}</slot></span>
-      <h2 :id="titleId" class="oc-modal-title"><slot name="title">{{ title }}</slot></h2>
-      <div :id="textId" class="oc-modal-body"><slot>{{ message }}</slot></div>
-      <div class="oc-modal-footer">
-        <slot name="footer" :close="close" :confirm="confirm" :cancel="cancel">
-          <button class="oc-btn oc-btn--outline" type="button" @click="cancel">{{ cancelLabel }}</button>
-          <button :class="['oc-btn', variant !== 'default' && `oc-btn--${variant}`]" type="button" @click="confirm">{{ confirmLabel }}</button>
-        </slot>
-      </div>
-    </div>
-  </dialog>
-</template>
+<script setup lang="ts">
+/**
+ * Confirmation modal with a status icon. v-model:open. Emits `confirm` / `cancel` (both close the dialog).
+ * Slots: icon, title, default (message), footer (scoped: { close }).
+ * Classes: .oc-alert-dialog(--success/--error/--warning/--info/--question), .oc-alert-dialog-icon
+ */
+import { computed, ref } from 'vue'
+import { useDialog } from '../composables/useDialog'
+import { useUid } from '../composables/useUid'
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'success' | 'error' | 'warning' | 'info' | 'question'
+    title?: string
+    message?: string
+    confirmLabel?: string
+    cancelLabel?: string
+    /** Variant of the confirm button; defaults to destructive for warning/error. */
+    confirmVariant?: 'default' | 'destructive' | 'success'
+  }>(),
+  { type: 'warning', confirmLabel: 'Confirm', cancelLabel: 'Cancel' },
+)
+const emit = defineEmits<{ confirm: []; cancel: [] }>()
+const open = defineModel<boolean>('open', { default: false })
+const el = ref<HTMLDialogElement | null>(null)
+const { onClose } = useDialog(open, el)
+const titleId = useUid('oc-alert-dialog-title')
+const textId = `${titleId}-text`
+
+const glyphs = { success: '✓', error: '×', warning: '!', info: 'i', question: '?' } as const
+const variant = computed(() => props.confirmVariant ?? (props.type === 'warning' || props.type === 'error' ? 'destructive' : 'default'))
+const close = () => (open.value = false)
+
+function confirm() {
+  emit('confirm')
+  close()
+}
+function cancel() {
+  emit('cancel')
+  close()
+}
+</script>
+
+<template>
+  <dialog
+    ref="el"
+    class="oc-modal"
+    closedby="closerequest"
+    role="alertdialog"
+    :aria-labelledby="titleId"
+    :aria-describedby="textId"
+    @close="onClose"
+  >
+    <div :class="['oc-modal-content', 'oc-modal-content--sm', 'oc-alert-dialog', `oc-alert-dialog--${type}`]">
+      <span class="oc-alert-dialog-icon" aria-hidden="true"><slot name="icon">{{ glyphs[type] }}</slot></span>
+      <h2 :id="titleId" class="oc-modal-title"><slot name="title">{{ title }}</slot></h2>
+      <div :id="textId" class="oc-modal-body"><slot>{{ message }}</slot></div>
+      <div class="oc-modal-footer">
+        <slot name="footer" :close="close" :confirm="confirm" :cancel="cancel">
+          <button class="oc-btn oc-btn--outline" type="button" @click="cancel">{{ cancelLabel }}</button>
+          <button :class="['oc-btn', variant !== 'default' && `oc-btn--${variant}`]" type="button" @click="confirm">{{ confirmLabel }}</button>
+        </slot>
+      </div>
+    </div>
+  </dialog>
+</template>

package/src/components/OcAlphaTabs.vue

@@ -1,54 +1,54 @@
-<!-- File: packages/vue/src/components/OcAlphaTabs.vue | Map: nav -> "All" item -> one item per letter (current / disabled) -->
-<script setup lang="ts">
-/**
- * All + A-Z letter filter. v-model = current letter ("all" by default).
- * With `href` (e.g. "?letter={letter}") the items are links; otherwise buttons that update v-model.
- * Classes: nav.oc-alpha-tabs(--wrap/--sm/--plain), .oc-alpha-tabs-item(--all), aria-current, aria-disabled
- */
-import { computed } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    letters?: string[]
-    /** Letters with entries; the others are disabled. Default: all. */
-    available?: string[]
-    /** Link pattern; "{letter}" is replaced, e.g. "?letter={letter}". */
-    href?: string
-    allLabel?: string
-    wrap?: boolean
-    size?: 'sm'
-    plain?: boolean
-  }>(),
-  { letters: () => 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), allLabel: 'All' },
-)
-const current = defineModel<string>({ default: 'all' })
-
-const items = computed(() => [
-  { key: 'all', label: props.allLabel, all: true },
-  ...props.letters.map((l) => ({ key: l, label: l, all: false })),
-])
-const isDisabled = (key: string) => key !== 'all' && props.available !== undefined && !props.available.includes(key)
-const link = (key: string) => props.href?.replace('{letter}', key)
-</script>
-
-<template>
-  <nav :class="['oc-alpha-tabs', wrap && 'oc-alpha-tabs--wrap', size && `oc-alpha-tabs--${size}`, plain && 'oc-alpha-tabs--plain']" aria-label="Filter by letter">
-    <template v-for="item in items" :key="item.key">
-      <a
-        v-if="href"
-        :class="['oc-alpha-tabs-item', item.all && 'oc-alpha-tabs-item--all']"
-        :href="isDisabled(item.key) ? undefined : link(item.key)"
-        :aria-current="current === item.key ? 'true' : undefined"
-        :aria-disabled="isDisabled(item.key) ? 'true' : undefined"
-      >{{ item.label }}</a>
-      <button
-        v-else
-        type="button"
-        :class="['oc-alpha-tabs-item', item.all && 'oc-alpha-tabs-item--all']"
-        :aria-current="current === item.key ? 'true' : undefined"
-        :disabled="isDisabled(item.key)"
-        @click="current = item.key"
-      >{{ item.label }}</button>
-    </template>
-  </nav>
-</template>
+<!-- File: packages/vue/src/components/OcAlphaTabs.vue | Map: nav -> "All" item -> one item per letter (current / disabled) -->
+<script setup lang="ts">
+/**
+ * All + A-Z letter filter. v-model = current letter ("all" by default).
+ * With `href` (e.g. "?letter={letter}") the items are links; otherwise buttons that update v-model.
+ * Classes: nav.oc-alpha-tabs(--wrap/--sm/--plain), .oc-alpha-tabs-item(--all), aria-current, aria-disabled
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    letters?: string[]
+    /** Letters with entries; the others are disabled. Default: all. */
+    available?: string[]
+    /** Link pattern; "{letter}" is replaced, e.g. "?letter={letter}". */
+    href?: string
+    allLabel?: string
+    wrap?: boolean
+    size?: 'sm'
+    plain?: boolean
+  }>(),
+  { letters: () => 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), allLabel: 'All' },
+)
+const current = defineModel<string>({ default: 'all' })
+
+const items = computed(() => [
+  { key: 'all', label: props.allLabel, all: true },
+  ...props.letters.map((l) => ({ key: l, label: l, all: false })),
+])
+const isDisabled = (key: string) => key !== 'all' && props.available !== undefined && !props.available.includes(key)
+const link = (key: string) => props.href?.replace('{letter}', key)
+</script>
+
+<template>
+  <nav :class="['oc-alpha-tabs', wrap && 'oc-alpha-tabs--wrap', size && `oc-alpha-tabs--${size}`, plain && 'oc-alpha-tabs--plain']" aria-label="Filter by letter">
+    <template v-for="item in items" :key="item.key">
+      <a
+        v-if="href"
+        :class="['oc-alpha-tabs-item', item.all && 'oc-alpha-tabs-item--all']"
+        :href="isDisabled(item.key) ? undefined : link(item.key)"
+        :aria-current="current === item.key ? 'true' : undefined"
+        :aria-disabled="isDisabled(item.key) ? 'true' : undefined"
+      >{{ item.label }}</a>
+      <button
+        v-else
+        type="button"
+        :class="['oc-alpha-tabs-item', item.all && 'oc-alpha-tabs-item--all']"
+        :aria-current="current === item.key ? 'true' : undefined"
+        :disabled="isDisabled(item.key)"
+        @click="current = item.key"
+      >{{ item.label }}</button>
+    </template>
+  </nav>
+</template>