@birdycom/omniaui-vue 0.11.0 → 0.11.1

package/src/blocks/OcBlockSiteFooter.vue

@@ -1,54 +1,54 @@
-<script setup lang="ts">
-/**
- * Brand column, link columns, a contact column and a bottom bar.
- * Slots: brand (the logo link), about (default: `about` text), bottom-start, bottom-end.
- * Classes: .oc-site-footer, __grid, __about, __title, __list, __bottom, .oc-site-header__brand
- */
-export interface SiteFooterColumn {
-  title: string
-  links: { label: string; href: string }[]
-}
-export interface SiteFooterContact {
-  title: string
-  lines: { label: string; href?: string }[]
-}
-defineProps<{
-  about?: string
-  columns?: SiteFooterColumn[]
-  contact?: SiteFooterContact
-  copyright?: string
-  credit?: string
-}>()
-</script>
-
-<template>
-  <footer class="oc-site-footer">
-    <div class="oc-container">
-      <div class="oc-site-footer__grid">
-        <div class="oc-site-footer__about">
-          <slot name="brand" />
-          <p v-if="about">{{ about }}</p>
-        </div>
-        <div v-for="col in columns" :key="col.title">
-          <h2 class="oc-site-footer__title">{{ col.title }}</h2>
-          <ul class="oc-site-footer__list">
-            <li v-for="link in col.links" :key="link.href + link.label"><a :href="link.href">{{ link.label }}</a></li>
-          </ul>
-        </div>
-        <div v-if="contact">
-          <h2 class="oc-site-footer__title">{{ contact.title }}</h2>
-          <address class="oc-site-footer__list">
-            <template v-for="line in contact.lines" :key="line.label">
-              <a v-if="line.href" :href="line.href">{{ line.label }}</a>
-              <span v-else>{{ line.label }}</span>
-            </template>
-          </address>
-        </div>
-      </div>
-      <div v-if="copyright || credit || $slots['bottom-start'] || $slots['bottom-end']" class="oc-site-footer__bottom">
-        <span><slot name="bottom-start">{{ copyright }}</slot></span>
-        <span><slot name="bottom-end">{{ credit }}</slot></span>
-      </div>
-    </div>
-  </footer>
-</template>
+<script setup lang="ts">
+/**
+ * Brand column, link columns, a contact column and a bottom bar.
+ * Slots: brand (the logo link), about (default: `about` text), bottom-start, bottom-end.
+ * Classes: .oc-site-footer, __grid, __about, __title, __list, __bottom, .oc-site-header__brand
+ */
+export interface SiteFooterColumn {
+  title: string
+  links: { label: string; href: string }[]
+}
+export interface SiteFooterContact {
+  title: string
+  lines: { label: string; href?: string }[]
+}
+defineProps<{
+  about?: string
+  columns?: SiteFooterColumn[]
+  contact?: SiteFooterContact
+  copyright?: string
+  credit?: string
+}>()
+</script>
+
+<template>
+  <footer class="oc-site-footer">
+    <div class="oc-container">
+      <div class="oc-site-footer__grid">
+        <div class="oc-site-footer__about">
+          <slot name="brand" />
+          <p v-if="about">{{ about }}</p>
+        </div>
+        <div v-for="col in columns" :key="col.title">
+          <h2 class="oc-site-footer__title">{{ col.title }}</h2>
+          <ul class="oc-site-footer__list">
+            <li v-for="link in col.links" :key="link.href + link.label"><a :href="link.href">{{ link.label }}</a></li>
+          </ul>
+        </div>
+        <div v-if="contact">
+          <h2 class="oc-site-footer__title">{{ contact.title }}</h2>
+          <address class="oc-site-footer__list">
+            <template v-for="line in contact.lines" :key="line.label">
+              <a v-if="line.href" :href="line.href">{{ line.label }}</a>
+              <span v-else>{{ line.label }}</span>
+            </template>
+          </address>
+        </div>
+      </div>
+      <div v-if="copyright || credit || $slots['bottom-start'] || $slots['bottom-end']" class="oc-site-footer__bottom">
+        <span><slot name="bottom-start">{{ copyright }}</slot></span>
+        <span><slot name="bottom-end">{{ credit }}</slot></span>
+      </div>
+    </div>
+  </footer>
+</template>

package/src/blocks/OcBlockSiteHeader.vue

@@ -1,34 +1,34 @@
-<script setup lang="ts">
-/**
- * Sticky header that turns into glass after scrolling; the mobile menu is a popover. No JavaScript needed.
- * Slots: brand (inside the brand link), nav (replaces the items), cta (the trailing button).
- * Classes: .oc-site-header, __inner, __brand, __toggle, __nav, .oc-container
- */
-import { useUid } from '../composables/useUid'
-
-export interface SiteHeaderLink {
-  label: string
-  href: string
-  current?: boolean
-}
-withDefaults(
-  defineProps<{ items?: SiteHeaderLink[]; homeHref?: string; menuLabel?: string; navLabel?: string }>(),
-  { items: () => [], homeHref: '/', menuLabel: 'Menu', navLabel: 'Main' },
-)
-const navId = useUid('oc-site-nav')
-</script>
-
-<template>
-  <header class="oc-site-header">
-    <div class="oc-container oc-site-header__inner">
-      <a class="oc-site-header__brand" :href="homeHref"><slot name="brand" /></a>
-      <button class="oc-site-header__toggle" type="button" :popovertarget="navId" :aria-label="menuLabel">&#9776;</button>
-      <nav :id="navId" class="oc-site-header__nav" popover :aria-label="navLabel">
-        <slot name="nav">
-          <a v-for="item in items" :key="item.href + item.label" :href="item.href" :aria-current="item.current ? 'page' : undefined">{{ item.label }}</a>
-        </slot>
-        <slot name="cta" />
-      </nav>
-    </div>
-  </header>
-</template>
+<script setup lang="ts">
+/**
+ * Sticky header that turns into glass after scrolling; the mobile menu is a popover. No JavaScript needed.
+ * Slots: brand (inside the brand link), nav (replaces the items), cta (the trailing button).
+ * Classes: .oc-site-header, __inner, __brand, __toggle, __nav, .oc-container
+ */
+import { useUid } from '../composables/useUid'
+
+export interface SiteHeaderLink {
+  label: string
+  href: string
+  current?: boolean
+}
+withDefaults(
+  defineProps<{ items?: SiteHeaderLink[]; homeHref?: string; menuLabel?: string; navLabel?: string }>(),
+  { items: () => [], homeHref: '/', menuLabel: 'Menu', navLabel: 'Main' },
+)
+const navId = useUid('oc-site-nav')
+</script>
+
+<template>
+  <header class="oc-site-header">
+    <div class="oc-container oc-site-header__inner">
+      <a class="oc-site-header__brand" :href="homeHref"><slot name="brand" /></a>
+      <button class="oc-site-header__toggle" type="button" :popovertarget="navId" :aria-label="menuLabel">&#9776;</button>
+      <nav :id="navId" class="oc-site-header__nav" popover :aria-label="navLabel">
+        <slot name="nav">
+          <a v-for="item in items" :key="item.href + item.label" :href="item.href" :aria-current="item.current ? 'page' : undefined">{{ item.label }}</a>
+        </slot>
+        <slot name="cta" />
+      </nav>
+    </div>
+  </header>
+</template>

package/src/blocks/OcBlockSpotlight.vue

@@ -1,47 +1,47 @@
-<script setup lang="ts">
-/**
- * Highlighted flagship product: badge, big title with icon tile, tagline, copy, button and a module list.
- * Slots: cta (default: a gradient link from `ctaLabel` / `ctaHref`). Classes: .oc-spotlight(__title/__tagline/__modules),
- * .oc-accent--<name>, .oc-pill--accent, .oc-status-dot, .oc-icon-tile(--lg/--sm), .oc-lead
- */
-export interface SpotlightModule {
-  icon?: string
-  label: string
-}
-defineProps<{
-  accent?: string
-  badge?: string
-  icon?: string
-  title: string
-  tagline?: string
-  lead?: string
-  ctaLabel?: string
-  ctaHref?: string
-  modules?: SpotlightModule[]
-}>()
-</script>
-
-<template>
-  <section class="oc-section-pad">
-    <div class="oc-container">
-      <div :class="['oc-spotlight', accent && `oc-accent--${accent}`]">
-        <div>
-          <span v-if="badge" class="oc-pill oc-pill--accent"><span class="oc-status-dot"></span>{{ badge }}</span>
-          <h2 class="oc-spotlight__title">
-            <span v-if="icon" class="oc-icon-tile oc-icon-tile--lg" aria-hidden="true">{{ icon }}</span>{{ title }}
-          </h2>
-          <p v-if="tagline" class="oc-spotlight__tagline">{{ tagline }}</p>
-          <p v-if="lead" class="oc-lead">{{ lead }}</p>
-          <slot name="cta">
-            <a v-if="ctaLabel" class="oc-btn oc-btn--gradient oc-btn--lg" :href="ctaHref ?? '#'">{{ ctaLabel }}</a>
-          </slot>
-        </div>
-        <ul v-if="modules?.length" class="oc-spotlight__modules">
-          <li v-for="m in modules" :key="m.label">
-            <span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">{{ m.icon }}</span>{{ m.label }}
-          </li>
-        </ul>
-      </div>
-    </div>
-  </section>
-</template>
+<script setup lang="ts">
+/**
+ * Highlighted flagship product: badge, big title with icon tile, tagline, copy, button and a module list.
+ * Slots: cta (default: a gradient link from `ctaLabel` / `ctaHref`). Classes: .oc-spotlight(__title/__tagline/__modules),
+ * .oc-accent--<name>, .oc-pill--accent, .oc-status-dot, .oc-icon-tile(--lg/--sm), .oc-lead
+ */
+export interface SpotlightModule {
+  icon?: string
+  label: string
+}
+defineProps<{
+  accent?: string
+  badge?: string
+  icon?: string
+  title: string
+  tagline?: string
+  lead?: string
+  ctaLabel?: string
+  ctaHref?: string
+  modules?: SpotlightModule[]
+}>()
+</script>
+
+<template>
+  <section class="oc-section-pad">
+    <div class="oc-container">
+      <div :class="['oc-spotlight', accent && `oc-accent--${accent}`]">
+        <div>
+          <span v-if="badge" class="oc-pill oc-pill--accent"><span class="oc-status-dot"></span>{{ badge }}</span>
+          <h2 class="oc-spotlight__title">
+            <span v-if="icon" class="oc-icon-tile oc-icon-tile--lg" aria-hidden="true">{{ icon }}</span>{{ title }}
+          </h2>
+          <p v-if="tagline" class="oc-spotlight__tagline">{{ tagline }}</p>
+          <p v-if="lead" class="oc-lead">{{ lead }}</p>
+          <slot name="cta">
+            <a v-if="ctaLabel" class="oc-btn oc-btn--gradient oc-btn--lg" :href="ctaHref ?? '#'">{{ ctaLabel }}</a>
+          </slot>
+        </div>
+        <ul v-if="modules?.length" class="oc-spotlight__modules">
+          <li v-for="m in modules" :key="m.label">
+            <span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">{{ m.icon }}</span>{{ m.label }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockStats.vue

@@ -1,17 +1,17 @@
-<script setup lang="ts">
-/** Key figures row. Classes: .oc-block-stats, -stat, -stat-value, -stat-label */
-export interface StatItem {
-  value: string
-  label: string
-}
-defineProps<{ items: StatItem[] }>()
-</script>
-
-<template>
-  <div class="oc-block-stats">
-    <div v-for="item in items" :key="item.label" class="oc-block-stat">
-      <div class="oc-block-stat-value">{{ item.value }}</div>
-      <div class="oc-block-stat-label">{{ item.label }}</div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+/** Key figures row. Classes: .oc-block-stats, -stat, -stat-value, -stat-label */
+export interface StatItem {
+  value: string
+  label: string
+}
+defineProps<{ items: StatItem[] }>()
+</script>
+
+<template>
+  <div class="oc-block-stats">
+    <div v-for="item in items" :key="item.label" class="oc-block-stat">
+      <div class="oc-block-stat-value">{{ item.value }}</div>
+      <div class="oc-block-stat-label">{{ item.label }}</div>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockStatsCounter.vue

@@ -1,20 +1,20 @@
-<script setup lang="ts">
-/** Key figures that count up when they scroll into view (CSS only). Classes: .oc-block-stats, -stat, -stat-value + .oc-counter, -stat-label */
-import OcCounter from '../components/OcCounter.vue'
-
-export interface CounterStat {
-  to: number
-  suffix?: string
-  label: string
-}
-defineProps<{ items: CounterStat[] }>()
-</script>
-
-<template>
-  <div class="oc-block-stats">
-    <div v-for="item in items" :key="item.label" class="oc-block-stat">
-      <OcCounter class="oc-block-stat-value" :to="item.to" :suffix="item.suffix" />
-      <span class="oc-block-stat-label">{{ item.label }}</span>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+/** Key figures that count up when they scroll into view (CSS only). Classes: .oc-block-stats, -stat, -stat-value + .oc-counter, -stat-label */
+import OcCounter from '../components/OcCounter.vue'
+
+export interface CounterStat {
+  to: number
+  suffix?: string
+  label: string
+}
+defineProps<{ items: CounterStat[] }>()
+</script>
+
+<template>
+  <div class="oc-block-stats">
+    <div v-for="item in items" :key="item.label" class="oc-block-stat">
+      <OcCounter class="oc-block-stat-value" :to="item.to" :suffix="item.suffix" />
+      <span class="oc-block-stat-label">{{ item.label }}</span>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockTeamList.vue

@@ -1,53 +1,53 @@
-<script setup lang="ts">
-/**
- * Member rows with avatar, role badge and a row action menu (popover). Emits `action` ({ member, action }).
- * Slot `meta` (scoped: { member }) adds extra badges. Classes: .oc-block-team, -row, -meta, .oc-user, .oc-dropdown-menu
- */
-import { useUid } from '../composables/useUid'
-
-export interface TeamAction {
-  label: string
-  href?: string
-  /** Draw a separator line before this action */
-  separator?: boolean
-}
-export interface TeamMember {
-  name: string
-  email?: string
-  initials?: string
-  role?: string
-  roleVariant?: 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'info'
-  actions?: TeamAction[]
-}
-defineProps<{ members: TeamMember[]; actionsLabel?: string }>()
-defineEmits<{ action: [payload: { member: TeamMember; action: TeamAction }] }>()
-const base = useUid('oc-team-menu')
-</script>
-
-<template>
-  <div class="oc-block-team">
-    <div v-for="(member, i) in members" :key="member.email ?? member.name" class="oc-block-team-row">
-      <div class="oc-user">
-        <span class="oc-avatar">{{ member.initials }}</span>
-        <span class="oc-user-text">
-          <span class="oc-user-name">{{ member.name }}</span>
-          <span v-if="member.email" class="oc-user-email">{{ member.email }}</span>
-        </span>
-      </div>
-      <div class="oc-block-team-meta">
-        <span v-if="member.role" :class="['oc-badge', member.roleVariant && member.roleVariant !== 'default' && `oc-badge--${member.roleVariant}`]">{{ member.role }}</span>
-        <slot name="meta" :member="member" />
-        <template v-if="member.actions?.length">
-          <button class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" type="button" :popovertarget="`${base}-${i}`" :aria-label="actionsLabel ?? 'Member actions'">&hellip;</button>
-          <div :id="`${base}-${i}`" class="oc-dropdown-menu" popover>
-            <template v-for="action in member.actions" :key="action.label">
-              <div v-if="action.separator" class="oc-dropdown-separator"></div>
-              <a v-if="action.href" class="oc-dropdown-item" :href="action.href" @click="$emit('action', { member, action })">{{ action.label }}</a>
-              <button v-else class="oc-dropdown-item" type="button" @click="$emit('action', { member, action })">{{ action.label }}</button>
-            </template>
-          </div>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Member rows with avatar, role badge and a row action menu (popover). Emits `action` ({ member, action }).
+ * Slot `meta` (scoped: { member }) adds extra badges. Classes: .oc-block-team, -row, -meta, .oc-user, .oc-dropdown-menu
+ */
+import { useUid } from '../composables/useUid'
+
+export interface TeamAction {
+  label: string
+  href?: string
+  /** Draw a separator line before this action */
+  separator?: boolean
+}
+export interface TeamMember {
+  name: string
+  email?: string
+  initials?: string
+  role?: string
+  roleVariant?: 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'info'
+  actions?: TeamAction[]
+}
+defineProps<{ members: TeamMember[]; actionsLabel?: string }>()
+defineEmits<{ action: [payload: { member: TeamMember; action: TeamAction }] }>()
+const base = useUid('oc-team-menu')
+</script>
+
+<template>
+  <div class="oc-block-team">
+    <div v-for="(member, i) in members" :key="member.email ?? member.name" class="oc-block-team-row">
+      <div class="oc-user">
+        <span class="oc-avatar">{{ member.initials }}</span>
+        <span class="oc-user-text">
+          <span class="oc-user-name">{{ member.name }}</span>
+          <span v-if="member.email" class="oc-user-email">{{ member.email }}</span>
+        </span>
+      </div>
+      <div class="oc-block-team-meta">
+        <span v-if="member.role" :class="['oc-badge', member.roleVariant && member.roleVariant !== 'default' && `oc-badge--${member.roleVariant}`]">{{ member.role }}</span>
+        <slot name="meta" :member="member" />
+        <template v-if="member.actions?.length">
+          <button class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" type="button" :popovertarget="`${base}-${i}`" :aria-label="actionsLabel ?? 'Member actions'">&hellip;</button>
+          <div :id="`${base}-${i}`" class="oc-dropdown-menu" popover>
+            <template v-for="action in member.actions" :key="action.label">
+              <div v-if="action.separator" class="oc-dropdown-separator"></div>
+              <a v-if="action.href" class="oc-dropdown-item" :href="action.href" @click="$emit('action', { member, action })">{{ action.label }}</a>
+              <button v-else class="oc-dropdown-item" type="button" @click="$emit('action', { member, action })">{{ action.label }}</button>
+            </template>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockTwoFactor.vue

@@ -1,61 +1,61 @@
-<script setup lang="ts">
-/**
- * Authenticator setup: QR, copyable key, OTP code and recovery codes. v-model = the typed code.
- * Emits `submit` with the code (form submit of the confirm step). Slot `qr` replaces the QR placeholder.
- * Classes: .oc-block-twofactor, -step, -center, -qr; reuses copy-field, otp, recovery-codes components.
- */
-import OcCopyField from '../components/OcCopyField.vue'
-import OcOtpInput from '../components/OcOtpInput.vue'
-import OcRecoveryCodes from '../components/OcRecoveryCodes.vue'
-import { useUid } from '../composables/useUid'
-
-withDefaults(
-  defineProps<{
-    setupKey: string
-    recoveryCodes?: string[]
-    length?: number
-    scanTitle?: string
-    scanText?: string
-    confirmTitle?: string
-    codeLabel?: string
-    submitLabel?: string
-  }>(),
-  {
-    length: 6,
-    scanTitle: '1. Scan the QR code',
-    scanText: 'Use an authenticator app, or enter the key manually.',
-    confirmTitle: '2. Confirm with a code',
-    codeLabel: 'Authentication code',
-    submitLabel: 'Enable two-factor',
-  },
-)
-defineEmits<{ submit: [code: string] }>()
-const code = defineModel<string>({ default: '' })
-const codeId = useUid('oc-twofactor-code')
-</script>
-
-<template>
-  <div class="oc-block-twofactor">
-    <section class="oc-block-twofactor-step">
-      <div class="oc-heading oc-heading--sm">
-        <h2 class="oc-heading-title">{{ scanTitle }}</h2>
-        <p v-if="scanText" class="oc-heading-description">{{ scanText }}</p>
-      </div>
-      <div class="oc-block-twofactor-center">
-        <slot name="qr"><div class="oc-block-twofactor-qr" role="img" aria-label="QR code">QR code</div></slot>
-        <OcCopyField :value="setupKey" label="Setup key" />
-      </div>
-    </section>
-    <section class="oc-block-twofactor-step">
-      <div class="oc-heading oc-heading--sm"><h2 class="oc-heading-title">{{ confirmTitle }}</h2></div>
-      <div class="oc-field">
-        <label class="oc-field-label" :for="codeId">{{ codeLabel }}</label>
-        <OcOtpInput :id="codeId" v-model="code" name="code" :length="length" />
-      </div>
-      <button class="oc-btn" type="submit" @click="$emit('submit', code)">{{ submitLabel }}</button>
-    </section>
-    <section v-if="recoveryCodes?.length" class="oc-block-twofactor-step">
-      <OcRecoveryCodes :codes="recoveryCodes" />
-    </section>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Authenticator setup: QR, copyable key, OTP code and recovery codes. v-model = the typed code.
+ * Emits `submit` with the code (form submit of the confirm step). Slot `qr` replaces the QR placeholder.
+ * Classes: .oc-block-twofactor, -step, -center, -qr; reuses copy-field, otp, recovery-codes components.
+ */
+import OcCopyField from '../components/OcCopyField.vue'
+import OcOtpInput from '../components/OcOtpInput.vue'
+import OcRecoveryCodes from '../components/OcRecoveryCodes.vue'
+import { useUid } from '../composables/useUid'
+
+withDefaults(
+  defineProps<{
+    setupKey: string
+    recoveryCodes?: string[]
+    length?: number
+    scanTitle?: string
+    scanText?: string
+    confirmTitle?: string
+    codeLabel?: string
+    submitLabel?: string
+  }>(),
+  {
+    length: 6,
+    scanTitle: '1. Scan the QR code',
+    scanText: 'Use an authenticator app, or enter the key manually.',
+    confirmTitle: '2. Confirm with a code',
+    codeLabel: 'Authentication code',
+    submitLabel: 'Enable two-factor',
+  },
+)
+defineEmits<{ submit: [code: string] }>()
+const code = defineModel<string>({ default: '' })
+const codeId = useUid('oc-twofactor-code')
+</script>
+
+<template>
+  <div class="oc-block-twofactor">
+    <section class="oc-block-twofactor-step">
+      <div class="oc-heading oc-heading--sm">
+        <h2 class="oc-heading-title">{{ scanTitle }}</h2>
+        <p v-if="scanText" class="oc-heading-description">{{ scanText }}</p>
+      </div>
+      <div class="oc-block-twofactor-center">
+        <slot name="qr"><div class="oc-block-twofactor-qr" role="img" aria-label="QR code">QR code</div></slot>
+        <OcCopyField :value="setupKey" label="Setup key" />
+      </div>
+    </section>
+    <section class="oc-block-twofactor-step">
+      <div class="oc-heading oc-heading--sm"><h2 class="oc-heading-title">{{ confirmTitle }}</h2></div>
+      <div class="oc-field">
+        <label class="oc-field-label" :for="codeId">{{ codeLabel }}</label>
+        <OcOtpInput :id="codeId" v-model="code" name="code" :length="length" />
+      </div>
+      <button class="oc-btn" type="submit" @click="$emit('submit', code)">{{ submitLabel }}</button>
+    </section>
+    <section v-if="recoveryCodes?.length" class="oc-block-twofactor-step">
+      <OcRecoveryCodes :codes="recoveryCodes" />
+    </section>
+  </div>
+</template>