@birdycom/omniaui-vue 0.11.0 → 0.11.2

package/src/components/OcToggleField.vue

@@ -1,28 +1,28 @@
-<!-- File: packages/vue/src/components/OcToggleField.vue | Map: props + model -> template (label row: text + span.oc-switch) -->
-<script setup lang="ts">
-/**
- * Settings row: title, description and a switch. v-model: boolean. Slots `label` / `description` override the props.
- * Same markup as packages/ui/snippets/toggle-field.html. class/style on the row, other attributes on the checkbox.
- */
-import { useAttrsSplit } from '../composables/useAttrsSplit'
-import { useUid } from '../composables/useUid'
-
-defineOptions({ inheritAttrs: false })
-defineProps<{ label?: string; description?: string; card?: boolean; reverse?: boolean }>()
-const model = defineModel<boolean>({ default: false })
-const { root, control } = useAttrsSplit()
-const descId = useUid('oc-toggle-field')
-</script>
-
-<template>
-  <label v-bind="root" :class="['oc-toggle-field', card && 'oc-toggle-field--card', reverse && 'oc-toggle-field--reverse']">
-    <span class="oc-toggle-field-text">
-      <span class="oc-toggle-field-label"><slot name="label">{{ label }}</slot></span>
-      <span v-if="description || $slots.description" :id="descId" class="oc-toggle-field-description"><slot name="description">{{ description }}</slot></span>
-    </span>
-    <span class="oc-switch">
-      <input v-bind="control" v-model="model" type="checkbox" role="switch" :aria-describedby="description || $slots.description ? descId : undefined" />
-      <span class="oc-switch-track"></span>
-    </span>
-  </label>
-</template>
+<!-- File: packages/vue/src/components/OcToggleField.vue | Map: props + model -> template (label row: text + span.oc-switch) -->
+<script setup lang="ts">
+/**
+ * Settings row: title, description and a switch. v-model: boolean. Slots `label` / `description` override the props.
+ * Same markup as packages/ui/snippets/toggle-field.html. class/style on the row, other attributes on the checkbox.
+ */
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+import { useUid } from '../composables/useUid'
+
+defineOptions({ inheritAttrs: false })
+defineProps<{ label?: string; description?: string; card?: boolean; reverse?: boolean }>()
+const model = defineModel<boolean>({ default: false })
+const { root, control } = useAttrsSplit()
+const descId = useUid('oc-toggle-field')
+</script>
+
+<template>
+  <label v-bind="root" :class="['oc-toggle-field', card && 'oc-toggle-field--card', reverse && 'oc-toggle-field--reverse']">
+    <span class="oc-toggle-field-text">
+      <span class="oc-toggle-field-label"><slot name="label">{{ label }}</slot></span>
+      <span v-if="description || $slots.description" :id="descId" class="oc-toggle-field-description"><slot name="description">{{ description }}</slot></span>
+    </span>
+    <span class="oc-switch">
+      <input v-bind="control" v-model="model" type="checkbox" role="switch" :aria-describedby="description || $slots.description ? descId : undefined" />
+      <span class="oc-switch-track"></span>
+    </span>
+  </label>
+</template>

package/src/components/OcToggleGroup.vue

@@ -1,40 +1,40 @@
-<script setup lang="ts">
-/**
- * Connected toggles. v-model = array of pressed values (type "multiple", checkbox inputs) or a single value
- * string (type "single", radio inputs). Put OcToggle items with a `value` inside.
- * Classes: .oc-toggle-group(--spaced)
- */
-import { computed, provide } from 'vue'
-import { useUid } from '../composables/useUid'
-import { toggleGroupKey } from '../composables/keys'
-
-const props = withDefaults(defineProps<{ type?: 'single' | 'multiple'; spaced?: boolean; label?: string; name?: string }>(), { type: 'multiple' })
-const model = defineModel<string | string[]>()
-const uid = useUid('oc-toggle')
-
-const values = computed(() => (Array.isArray(model.value) ? model.value : model.value ? [model.value] : []))
-function toggle(value: string) {
-  if (props.type === 'single') {
-    model.value = value
-  } else {
-    const list = values.value
-    model.value = list.includes(value) ? list.filter((v) => v !== value) : [...list, value]
-  }
-}
-provide(toggleGroupKey, {
-  values,
-  type: computed(() => props.type),
-  name: computed(() => props.name ?? uid),
-  toggle,
-})
-</script>
-
-<template>
-  <div
-    :class="['oc-toggle-group', spaced && 'oc-toggle-group--spaced']"
-    :role="type === 'single' ? 'radiogroup' : 'group'"
-    :aria-label="label"
-  >
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Connected toggles. v-model = array of pressed values (type "multiple", checkbox inputs) or a single value
+ * string (type "single", radio inputs). Put OcToggle items with a `value` inside.
+ * Classes: .oc-toggle-group(--spaced)
+ */
+import { computed, provide } from 'vue'
+import { useUid } from '../composables/useUid'
+import { toggleGroupKey } from '../composables/keys'
+
+const props = withDefaults(defineProps<{ type?: 'single' | 'multiple'; spaced?: boolean; label?: string; name?: string }>(), { type: 'multiple' })
+const model = defineModel<string | string[]>()
+const uid = useUid('oc-toggle')
+
+const values = computed(() => (Array.isArray(model.value) ? model.value : model.value ? [model.value] : []))
+function toggle(value: string) {
+  if (props.type === 'single') {
+    model.value = value
+  } else {
+    const list = values.value
+    model.value = list.includes(value) ? list.filter((v) => v !== value) : [...list, value]
+  }
+}
+provide(toggleGroupKey, {
+  values,
+  type: computed(() => props.type),
+  name: computed(() => props.name ?? uid),
+  toggle,
+})
+</script>
+
+<template>
+  <div
+    :class="['oc-toggle-group', spaced && 'oc-toggle-group--spaced']"
+    :role="type === 'single' ? 'radiogroup' : 'group'"
+    :aria-label="label"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/OcTooltip.vue

@@ -1,8 +1,8 @@
-<script setup lang="ts">
-/** CSS-only tooltip: wraps the default slot and shows `text` via data-tooltip. */
-defineProps<{ text: string }>()
-</script>
-
-<template>
-  <span class="oc-tooltip" :data-tooltip="text"><slot /></span>
-</template>
+<script setup lang="ts">
+/** CSS-only tooltip: wraps the default slot and shows `text` via data-tooltip. */
+defineProps<{ text: string }>()
+</script>
+
+<template>
+  <span class="oc-tooltip" :data-tooltip="text"><slot /></span>
+</template>

package/src/components/OcTopProgress.vue

@@ -1,54 +1,54 @@
-<!-- File: packages/vue/src/components/OcTopProgress.vue | Map: progress.oc-top-progress -> phase (hidden / active / done) -> fade-out timer -->
-<script setup lang="ts">
-/**
- * Thin page-top loading bar. `active` shows it; when `active` turns false the bar fades out (.is-done)
- * and is hidden after `fadeMs`. Without `value` it is indeterminate.
- * Classes: progress.oc-top-progress(--success/--warning/--danger/--brand/--lg/--static), .is-done, [hidden]
- */
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    active?: boolean
-    value?: number
-    max?: number
-    tone?: 'default' | 'success' | 'warning' | 'danger' | 'brand'
-    large?: boolean
-    /** In the normal flow (inside a card) instead of fixed at the top. */
-    static?: boolean
-    fadeMs?: number
-  }>(),
-  { active: true, tone: 'default', fadeMs: 400, value: undefined, max: undefined },
-)
-
-const phase = ref<'hidden' | 'active' | 'done'>(props.active ? 'active' : 'hidden')
-let timer: ReturnType<typeof setTimeout> | undefined
-
-watch(
-  () => props.active,
-  (on) => {
-    clearTimeout(timer)
-    if (on) {
-      phase.value = 'active'
-      return
-    }
-    // Only fade out when the bar was visible.
-    if (phase.value === 'hidden') return
-    phase.value = 'done'
-    timer = setTimeout(() => (phase.value = 'hidden'), props.fadeMs)
-  },
-)
-onBeforeUnmount(() => clearTimeout(timer))
-
-const classes = computed(() => [
-  'oc-top-progress',
-  props.tone !== 'default' && `oc-top-progress--${props.tone}`,
-  props.large && 'oc-top-progress--lg',
-  props.static && 'oc-top-progress--static',
-  phase.value === 'done' && 'is-done',
-])
-</script>
-
-<template>
-  <progress :class="classes" :value="value" :max="max" :hidden="phase === 'hidden'"></progress>
-</template>
+<!-- File: packages/vue/src/components/OcTopProgress.vue | Map: progress.oc-top-progress -> phase (hidden / active / done) -> fade-out timer -->
+<script setup lang="ts">
+/**
+ * Thin page-top loading bar. `active` shows it; when `active` turns false the bar fades out (.is-done)
+ * and is hidden after `fadeMs`. Without `value` it is indeterminate.
+ * Classes: progress.oc-top-progress(--success/--warning/--danger/--brand/--lg/--static), .is-done, [hidden]
+ */
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    active?: boolean
+    value?: number
+    max?: number
+    tone?: 'default' | 'success' | 'warning' | 'danger' | 'brand'
+    large?: boolean
+    /** In the normal flow (inside a card) instead of fixed at the top. */
+    static?: boolean
+    fadeMs?: number
+  }>(),
+  { active: true, tone: 'default', fadeMs: 400, value: undefined, max: undefined },
+)
+
+const phase = ref<'hidden' | 'active' | 'done'>(props.active ? 'active' : 'hidden')
+let timer: ReturnType<typeof setTimeout> | undefined
+
+watch(
+  () => props.active,
+  (on) => {
+    clearTimeout(timer)
+    if (on) {
+      phase.value = 'active'
+      return
+    }
+    // Only fade out when the bar was visible.
+    if (phase.value === 'hidden') return
+    phase.value = 'done'
+    timer = setTimeout(() => (phase.value = 'hidden'), props.fadeMs)
+  },
+)
+onBeforeUnmount(() => clearTimeout(timer))
+
+const classes = computed(() => [
+  'oc-top-progress',
+  props.tone !== 'default' && `oc-top-progress--${props.tone}`,
+  props.large && 'oc-top-progress--lg',
+  props.static && 'oc-top-progress--static',
+  phase.value === 'done' && 'is-done',
+])
+</script>
+
+<template>
+  <progress :class="classes" :value="value" :max="max" :hidden="phase === 'hidden'"></progress>
+</template>

package/src/components/OcTree.vue

@@ -1,70 +1,70 @@
-<!-- File: packages/vue/src/components/OcTree.vue | Map: box (+ head row) -> list -> item: folder (details/summary + nested OcTree) or leaf (div row) -->
-<script setup lang="ts">
-/**
- * Nested tree list on details / summary. Renders itself recursively for child lists (`nested`).
- * Slots (scoped, { item }): icon, actions; plus `head-actions` for the head row.
- * Classes: .oc-tree(--quiet/--flush), .oc-tree-head, ul.oc-tree-list, details.oc-tree-node, .oc-tree-row(.is-muted),
- * .oc-tree-icon, .oc-tree-label, .oc-tree-count, .oc-tree-actions
- */
-export interface OcTreeItem {
-  label: string
-  href?: string
-  count?: string | number
-  children?: OcTreeItem[]
-  open?: boolean
-  current?: boolean
-  muted?: boolean
-}
-
-defineOptions({ name: 'OcTree' })
-defineProps<{
-  items: OcTreeItem[]
-  head?: string
-  quiet?: boolean
-  flush?: boolean
-  /** Internal: render only the list (used for child lists). */
-  nested?: boolean
-}>()
-// Typed slots: the component renders itself, so TypeScript cannot infer these on its own.
-defineSlots<{
-  icon?(props: { item: OcTreeItem }): unknown
-  actions?(props: { item: OcTreeItem }): unknown
-  'head-actions'?(): unknown
-}>()
-</script>
-
-<template>
-  <ul v-if="nested" class="oc-tree-list">
-    <li v-for="(item, i) in items" :key="i">
-      <details v-if="item.children?.length" class="oc-tree-node" :open="item.open">
-        <summary :class="['oc-tree-row', item.muted && 'is-muted']" :aria-current="item.current && !item.href ? 'true' : undefined">
-          <span v-if="$slots.icon" class="oc-tree-icon" aria-hidden="true"><slot name="icon" :item="item" /></span>
-          <span class="oc-tree-label">{{ item.label }}</span>
-          <span v-if="item.count != null" class="oc-tree-count">{{ item.count }}</span>
-          <span v-if="$slots.actions" class="oc-tree-actions"><slot name="actions" :item="item" /></span>
-        </summary>
-        <OcTree :items="item.children" nested>
-          <template v-if="$slots.icon" #icon="{ item: child }"><slot name="icon" :item="child" /></template>
-          <template v-if="$slots.actions" #actions="{ item: child }"><slot name="actions" :item="child" /></template>
-        </OcTree>
-      </details>
-      <div v-else :class="['oc-tree-row', item.muted && 'is-muted']" :aria-current="item.current && !item.href ? 'true' : undefined">
-        <span v-if="$slots.icon" class="oc-tree-icon" aria-hidden="true"><slot name="icon" :item="item" /></span>
-        <a v-if="item.href" class="oc-tree-label" :href="item.href" :aria-current="item.current ? 'true' : undefined">{{ item.label }}</a>
-        <span v-else class="oc-tree-label">{{ item.label }}</span>
-        <span v-if="item.count != null" class="oc-tree-count">{{ item.count }}</span>
-        <span v-if="$slots.actions" class="oc-tree-actions"><slot name="actions" :item="item" /></span>
-      </div>
-    </li>
-  </ul>
-  <div v-else :class="['oc-tree', quiet && 'oc-tree--quiet', flush && 'oc-tree--flush']">
-    <div v-if="head" class="oc-tree-row oc-tree-head">
-      <span class="oc-tree-label">{{ head }}</span>
-      <span v-if="$slots['head-actions']" class="oc-tree-actions"><slot name="head-actions" /></span>
-    </div>
-    <OcTree :items="items" nested>
-      <template v-if="$slots.icon" #icon="{ item: child }"><slot name="icon" :item="child" /></template>
-      <template v-if="$slots.actions" #actions="{ item: child }"><slot name="actions" :item="child" /></template>
-    </OcTree>
-  </div>
-</template>
+<!-- File: packages/vue/src/components/OcTree.vue | Map: box (+ head row) -> list -> item: folder (details/summary + nested OcTree) or leaf (div row) -->
+<script setup lang="ts">
+/**
+ * Nested tree list on details / summary. Renders itself recursively for child lists (`nested`).
+ * Slots (scoped, { item }): icon, actions; plus `head-actions` for the head row.
+ * Classes: .oc-tree(--quiet/--flush), .oc-tree-head, ul.oc-tree-list, details.oc-tree-node, .oc-tree-row(.is-muted),
+ * .oc-tree-icon, .oc-tree-label, .oc-tree-count, .oc-tree-actions
+ */
+export interface OcTreeItem {
+  label: string
+  href?: string
+  count?: string | number
+  children?: OcTreeItem[]
+  open?: boolean
+  current?: boolean
+  muted?: boolean
+}
+
+defineOptions({ name: 'OcTree' })
+defineProps<{
+  items: OcTreeItem[]
+  head?: string
+  quiet?: boolean
+  flush?: boolean
+  /** Internal: render only the list (used for child lists). */
+  nested?: boolean
+}>()
+// Typed slots: the component renders itself, so TypeScript cannot infer these on its own.
+defineSlots<{
+  icon?(props: { item: OcTreeItem }): unknown
+  actions?(props: { item: OcTreeItem }): unknown
+  'head-actions'?(): unknown
+}>()
+</script>
+
+<template>
+  <ul v-if="nested" class="oc-tree-list">
+    <li v-for="(item, i) in items" :key="i">
+      <details v-if="item.children?.length" class="oc-tree-node" :open="item.open">
+        <summary :class="['oc-tree-row', item.muted && 'is-muted']" :aria-current="item.current && !item.href ? 'true' : undefined">
+          <span v-if="$slots.icon" class="oc-tree-icon" aria-hidden="true"><slot name="icon" :item="item" /></span>
+          <span class="oc-tree-label">{{ item.label }}</span>
+          <span v-if="item.count != null" class="oc-tree-count">{{ item.count }}</span>
+          <span v-if="$slots.actions" class="oc-tree-actions"><slot name="actions" :item="item" /></span>
+        </summary>
+        <OcTree :items="item.children" nested>
+          <template v-if="$slots.icon" #icon="{ item: child }"><slot name="icon" :item="child" /></template>
+          <template v-if="$slots.actions" #actions="{ item: child }"><slot name="actions" :item="child" /></template>
+        </OcTree>
+      </details>
+      <div v-else :class="['oc-tree-row', item.muted && 'is-muted']" :aria-current="item.current && !item.href ? 'true' : undefined">
+        <span v-if="$slots.icon" class="oc-tree-icon" aria-hidden="true"><slot name="icon" :item="item" /></span>
+        <a v-if="item.href" class="oc-tree-label" :href="item.href" :aria-current="item.current ? 'true' : undefined">{{ item.label }}</a>
+        <span v-else class="oc-tree-label">{{ item.label }}</span>
+        <span v-if="item.count != null" class="oc-tree-count">{{ item.count }}</span>
+        <span v-if="$slots.actions" class="oc-tree-actions"><slot name="actions" :item="item" /></span>
+      </div>
+    </li>
+  </ul>
+  <div v-else :class="['oc-tree', quiet && 'oc-tree--quiet', flush && 'oc-tree--flush']">
+    <div v-if="head" class="oc-tree-row oc-tree-head">
+      <span class="oc-tree-label">{{ head }}</span>
+      <span v-if="$slots['head-actions']" class="oc-tree-actions"><slot name="head-actions" /></span>
+    </div>
+    <OcTree :items="items" nested>
+      <template v-if="$slots.icon" #icon="{ item: child }"><slot name="icon" :item="child" /></template>
+      <template v-if="$slots.actions" #actions="{ item: child }"><slot name="actions" :item="child" /></template>
+    </OcTree>
+  </div>
+</template>

package/src/components/OcUpgradeBanner.vue

@@ -1,42 +1,42 @@
-<!-- File: packages/vue/src/components/OcUpgradeBanner.vue | Map: aside -> icon slot -> body (title + plan pill, text slot, usage meter) -> actions slot -> dismiss button -->
-<script setup lang="ts">
-/**
- * Free-plan limits callout. `dismissible` adds an X that emits `dismiss` (your app hides the banner).
- * Slots: icon, default (text, may hold links), actions.
- * Classes: .oc-upgrade-banner(--premium/--compact), -icon, -body, -title, -plan, -text, -usage, meter.oc-upgrade-banner-meter, -actions, -dismiss
- */
-withDefaults(
-  defineProps<{
-    title: string
-    plan?: string
-    text?: string
-    usage?: { label: string; value: number; max: number }
-    premium?: boolean
-    compact?: boolean
-    dismissible?: boolean
-    dismissLabel?: string
-  }>(),
-  { dismissLabel: 'Dismiss' },
-)
-const emit = defineEmits<{ dismiss: [] }>()
-</script>
-
-<template>
-  <aside :class="['oc-upgrade-banner', premium && 'oc-upgrade-banner--premium', compact && 'oc-upgrade-banner--compact']">
-    <span v-if="$slots.icon" class="oc-upgrade-banner-icon" aria-hidden="true"><slot name="icon" /></span>
-    <div class="oc-upgrade-banner-body">
-      <p class="oc-upgrade-banner-title">{{ title }} <span v-if="plan" class="oc-upgrade-banner-plan">{{ plan }}</span></p>
-      <p v-if="$slots.default || text" class="oc-upgrade-banner-text"><slot>{{ text }}</slot></p>
-      <div v-if="usage" class="oc-upgrade-banner-usage">
-        <span>{{ usage.label }}</span>
-        <!-- low / high make the meter turn "less good" near the limit. -->
-        <meter class="oc-upgrade-banner-meter" min="0" :max="usage.max" :low="usage.max * 0.6" :high="usage.max * 0.8" optimum="0" :value="usage.value">
-          {{ usage.value }} of {{ usage.max }}
-        </meter>
-        <span>{{ usage.value }} / {{ usage.max }}</span>
-      </div>
-    </div>
-    <div v-if="$slots.actions" class="oc-upgrade-banner-actions"><slot name="actions" /></div>
-    <button v-if="dismissible" class="oc-upgrade-banner-dismiss" type="button" :aria-label="dismissLabel" @click="emit('dismiss')">×</button>
-  </aside>
-</template>
+<!-- File: packages/vue/src/components/OcUpgradeBanner.vue | Map: aside -> icon slot -> body (title + plan pill, text slot, usage meter) -> actions slot -> dismiss button -->
+<script setup lang="ts">
+/**
+ * Free-plan limits callout. `dismissible` adds an X that emits `dismiss` (your app hides the banner).
+ * Slots: icon, default (text, may hold links), actions.
+ * Classes: .oc-upgrade-banner(--premium/--compact), -icon, -body, -title, -plan, -text, -usage, meter.oc-upgrade-banner-meter, -actions, -dismiss
+ */
+withDefaults(
+  defineProps<{
+    title: string
+    plan?: string
+    text?: string
+    usage?: { label: string; value: number; max: number }
+    premium?: boolean
+    compact?: boolean
+    dismissible?: boolean
+    dismissLabel?: string
+  }>(),
+  { dismissLabel: 'Dismiss' },
+)
+const emit = defineEmits<{ dismiss: [] }>()
+</script>
+
+<template>
+  <aside :class="['oc-upgrade-banner', premium && 'oc-upgrade-banner--premium', compact && 'oc-upgrade-banner--compact']">
+    <span v-if="$slots.icon" class="oc-upgrade-banner-icon" aria-hidden="true"><slot name="icon" /></span>
+    <div class="oc-upgrade-banner-body">
+      <p class="oc-upgrade-banner-title">{{ title }} <span v-if="plan" class="oc-upgrade-banner-plan">{{ plan }}</span></p>
+      <p v-if="$slots.default || text" class="oc-upgrade-banner-text"><slot>{{ text }}</slot></p>
+      <div v-if="usage" class="oc-upgrade-banner-usage">
+        <span>{{ usage.label }}</span>
+        <!-- low / high make the meter turn "less good" near the limit. -->
+        <meter class="oc-upgrade-banner-meter" min="0" :max="usage.max" :low="usage.max * 0.6" :high="usage.max * 0.8" optimum="0" :value="usage.value">
+          {{ usage.value }} of {{ usage.max }}
+        </meter>
+        <span>{{ usage.value }} / {{ usage.max }}</span>
+      </div>
+    </div>
+    <div v-if="$slots.actions" class="oc-upgrade-banner-actions"><slot name="actions" /></div>
+    <button v-if="dismissible" class="oc-upgrade-banner-dismiss" type="button" :aria-label="dismissLabel" @click="emit('dismiss')">×</button>
+  </aside>
+</template>

package/src/components/OcUser.vue

@@ -1,25 +1,25 @@
-<script setup lang="ts">
-/** Avatar with name and e-mail (truncating). `initials` or `src` fill the avatar; slot `avatar` replaces it. */
-defineProps<{
-  name: string
-  email?: string
-  initials?: string
-  src?: string
-  avatarSize?: 'sm' | 'md' | 'lg' | 'xl'
-}>()
-</script>
-
-<template>
-  <div class="oc-user">
-    <slot name="avatar">
-      <span :class="['oc-avatar', avatarSize && avatarSize !== 'md' && `oc-avatar--${avatarSize}`]">
-        <img v-if="src" :src="src" alt="" />
-        <template v-else>{{ initials }}</template>
-      </span>
-    </slot>
-    <span class="oc-user-text">
-      <span class="oc-user-name">{{ name }}</span>
-      <span v-if="email" class="oc-user-email">{{ email }}</span>
-    </span>
-  </div>
-</template>
+<script setup lang="ts">
+/** Avatar with name and e-mail (truncating). `initials` or `src` fill the avatar; slot `avatar` replaces it. */
+defineProps<{
+  name: string
+  email?: string
+  initials?: string
+  src?: string
+  avatarSize?: 'sm' | 'md' | 'lg' | 'xl'
+}>()
+</script>
+
+<template>
+  <div class="oc-user">
+    <slot name="avatar">
+      <span :class="['oc-avatar', avatarSize && avatarSize !== 'md' && `oc-avatar--${avatarSize}`]">
+        <img v-if="src" :src="src" alt="" />
+        <template v-else>{{ initials }}</template>
+      </span>
+    </slot>
+    <span class="oc-user-text">
+      <span class="oc-user-name">{{ name }}</span>
+      <span v-if="email" class="oc-user-email">{{ email }}</span>
+    </span>
+  </div>
+</template>

package/src/components/OcVersionBanner.vue

@@ -1,34 +1,34 @@
-<!-- File: packages/vue/src/components/OcVersionBanner.vue | Map: chip (role=status) -> dot -> long text -> short text -> reload action -->
-<script setup lang="ts">
-/**
- * "New version available - reload" chip. Renders nothing while `version` is empty.
- * Without an @reload listener the action is a plain link to the current page; with one it is a button.
- * Slots: default (long text). Classes: .oc-version-banner(--info/--success/--floating), -dot, -text, -short, -action
- */
-const props = withDefaults(
-  defineProps<{
-    version?: string | null
-    short?: string
-    actionLabel?: string
-    tone?: 'warning' | 'info' | 'success'
-    floating?: boolean
-    /** Declared as a prop so the component can see whether a listener is set. */
-    onReload?: () => void
-  }>(),
-  { short: 'New version', actionLabel: 'Reload', tone: 'warning', version: null, onReload: undefined },
-)
-</script>
-
-<template>
-  <div
-    v-if="version"
-    :class="['oc-version-banner', tone !== 'warning' && `oc-version-banner--${tone}`, floating && 'oc-version-banner--floating']"
-    role="status"
-  >
-    <span class="oc-version-banner-dot" aria-hidden="true"></span>
-    <span class="oc-version-banner-text"><slot>New version ({{ version }}) available - reload the page</slot></span>
-    <span class="oc-version-banner-short">{{ short }}</span>
-    <button v-if="props.onReload" class="oc-version-banner-action" type="button" @click="props.onReload()">{{ actionLabel }}</button>
-    <a v-else class="oc-version-banner-action" href="">{{ actionLabel }}</a>
-  </div>
-</template>
+<!-- File: packages/vue/src/components/OcVersionBanner.vue | Map: chip (role=status) -> dot -> long text -> short text -> reload action -->
+<script setup lang="ts">
+/**
+ * "New version available - reload" chip. Renders nothing while `version` is empty.
+ * Without an @reload listener the action is a plain link to the current page; with one it is a button.
+ * Slots: default (long text). Classes: .oc-version-banner(--info/--success/--floating), -dot, -text, -short, -action
+ */
+const props = withDefaults(
+  defineProps<{
+    version?: string | null
+    short?: string
+    actionLabel?: string
+    tone?: 'warning' | 'info' | 'success'
+    floating?: boolean
+    /** Declared as a prop so the component can see whether a listener is set. */
+    onReload?: () => void
+  }>(),
+  { short: 'New version', actionLabel: 'Reload', tone: 'warning', version: null, onReload: undefined },
+)
+</script>
+
+<template>
+  <div
+    v-if="version"
+    :class="['oc-version-banner', tone !== 'warning' && `oc-version-banner--${tone}`, floating && 'oc-version-banner--floating']"
+    role="status"
+  >
+    <span class="oc-version-banner-dot" aria-hidden="true"></span>
+    <span class="oc-version-banner-text"><slot>New version ({{ version }}) available - reload the page</slot></span>
+    <span class="oc-version-banner-short">{{ short }}</span>
+    <button v-if="props.onReload" class="oc-version-banner-action" type="button" @click="props.onReload()">{{ actionLabel }}</button>
+    <a v-else class="oc-version-banner-action" href="">{{ actionLabel }}</a>
+  </div>
+</template>