@birdycom/omniaui-vue 0.0.0-stage → 0.11.0

package/src/components/OcRecoveryCodes.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+/**
+ * Warning panel with a code grid plus "copy all" and "download .txt" actions (handled here).
+ * Emits `copy` and `download`. Slot: actions (replaces the two buttons).
+ */
+const props = withDefaults(
+  defineProps<{
+    codes: string[]
+    title?: string
+    warning?: string
+    copyLabel?: string
+    downloadLabel?: string
+    filename?: string
+  }>(),
+  {
+    title: 'Recovery codes',
+    warning: 'Store these codes somewhere safe. Each code works once.',
+    copyLabel: 'Copy all',
+    downloadLabel: 'Download .txt',
+    filename: 'recovery-codes.txt',
+  },
+)
+const emit = defineEmits<{ copy: []; download: [] }>()
+
+async function copyAll() {
+  await navigator.clipboard.writeText(props.codes.join('\n'))
+  emit('copy')
+}
+
+function download() {
+  const url = URL.createObjectURL(new Blob([props.codes.join('\n') + '\n'], { type: 'text/plain' }))
+  const a = document.createElement('a')
+  a.href = url
+  a.download = props.filename
+  a.click()
+  URL.revokeObjectURL(url)
+  emit('download')
+}
+</script>
+
+<template>
+  <div class="oc-recovery-codes">
+    <h3 class="oc-recovery-codes-title">{{ title }}</h3>
+    <p class="oc-recovery-codes-warning">{{ warning }}</p>
+    <ul class="oc-recovery-codes-list">
+      <li v-for="code in codes" :key="code">{{ code }}</li>
+    </ul>
+    <div class="oc-recovery-codes-actions">
+      <slot name="actions">
+        <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" @click="copyAll">{{ copyLabel }}</button>
+        <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" @click="download">{{ downloadLabel }}</button>
+      </slot>
+    </div>
+  </div>
+</template>

package/src/components/OcScrollArea.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+/** Bounded scroll region (focusable, role=region) with themed scrollbar. `label` = aria-label. Classes: .oc-scroll-area(--x/--shadows) */
+defineProps<{ horizontal?: boolean; shadows?: boolean; label?: string }>()
+</script>
+
+<template>
+  <div
+    :class="['oc-scroll-area', horizontal && 'oc-scroll-area--x', shadows && 'oc-scroll-area--shadows']"
+    tabindex="0"
+    role="region"
+    :aria-label="label"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/OcSegmented.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+/** Radio group as a pill switcher. v-model = selected value. Classes: .oc-segmented(--block/--sm), -item */
+import { useUid } from '../composables/useUid'
+
+export interface SegmentedOption {
+  value: string
+  label: string
+}
+defineProps<{
+  options: SegmentedOption[]
+  /** aria-label of the group */
+  label?: string
+  block?: boolean
+  size?: 'sm' | 'md'
+  name?: string
+}>()
+const model = defineModel<string>()
+const uid = useUid('oc-segmented')
+</script>
+
+<template>
+  <div :class="['oc-segmented', block && 'oc-segmented--block', size === 'sm' && 'oc-segmented--sm']" role="radiogroup" :aria-label="label">
+    <label v-for="option in options" :key="option.value" class="oc-segmented-item">
+      <input v-model="model" type="radio" :name="name ?? uid" :value="option.value" />
+      {{ option.label }}
+    </label>
+  </div>
+</template>

package/src/components/OcSelect.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/** Native select. v-model. Pass `options` (strings or { value, label }) or <option> elements in the default slot. */
+export interface SelectOption {
+  value: string | number
+  label: string
+  disabled?: boolean
+}
+defineProps<{ options?: (string | SelectOption)[] }>()
+const model = defineModel<any>()
+</script>
+
+<template>
+  <select v-model="model" class="oc-select">
+    <slot>
+      <template v-for="o in options" :key="typeof o === 'string' ? o : o.value">
+        <option v-if="typeof o === 'string'" :value="o">{{ o }}</option>
+        <option v-else :value="o.value" :disabled="o.disabled">{{ o.label }}</option>
+      </template>
+    </slot>
+  </select>
+</template>

package/src/components/OcSeparator.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+/**
+ * Divider. Default = <hr>. `vertical` = inline separator for flex rows. `label` (or the default slot) renders the
+ * line-text-line form. Classes: .oc-separator(--vertical/--strong), .oc-separator-text
+ */
+defineProps<{ vertical?: boolean; strong?: boolean; label?: string }>()
+</script>
+
+<template>
+  <div v-if="label || $slots.default" class="oc-separator-text" role="separator"><span><slot>{{ label }}</slot></span></div>
+  <span
+    v-else-if="vertical"
+    :class="['oc-separator', 'oc-separator--vertical', strong && 'oc-separator--strong']"
+    role="separator"
+    aria-orientation="vertical"
+  ></span>
+  <hr v-else :class="['oc-separator', strong && 'oc-separator--strong']" />
+</template>

package/src/components/OcSeverityCard.vue

@@ -0,0 +1,46 @@
+<!-- File: packages/vue/src/components/OcSeverityCard.vue | Map: details -> summary head (icon, title + tags, level badge) -> body (default slot, actions slot) -->
+<script setup lang="ts">
+/**
+ * Expandable card colored by risk level. v-model:open. Cards with the same `name` open one at a time.
+ * Slots: icon, default (body), actions.
+ * Classes: details.oc-severity-card(--low/--medium/--high/--critical, .is-resolved), -head, -icon, -main, -title, -tags, -tag, -level, -body, -actions
+ */
+const props = defineProps<{
+  level: 'low' | 'medium' | 'high' | 'critical'
+  title: string
+  tags?: string[]
+  levelLabel?: string
+  resolved?: boolean
+  name?: string
+}>()
+const open = defineModel<boolean>('open', { default: false })
+const LEVEL_TEXT = { low: 'Low', medium: 'Medium', high: 'High', critical: 'Critical' } as const
+
+function onToggle(e: Event) {
+  open.value = (e.target as HTMLDetailsElement).open
+}
+</script>
+
+<template>
+  <details
+    :class="['oc-severity-card', `oc-severity-card--${level}`, resolved && 'is-resolved']"
+    :name="name"
+    :open="open"
+    @toggle="onToggle"
+  >
+    <summary class="oc-severity-card-head">
+      <span v-if="$slots.icon" class="oc-severity-card-icon" aria-hidden="true"><slot name="icon" /></span>
+      <span class="oc-severity-card-main">
+        <span class="oc-severity-card-title">{{ title }}</span>
+        <span v-if="tags?.length" class="oc-severity-card-tags">
+          <span v-for="t in tags" :key="t" class="oc-severity-card-tag">{{ t }}</span>
+        </span>
+      </span>
+      <span class="oc-severity-card-level">{{ levelLabel ?? LEVEL_TEXT[props.level] }}</span>
+    </summary>
+    <div class="oc-severity-card-body">
+      <slot />
+      <div v-if="$slots.actions" class="oc-severity-card-actions"><slot name="actions" /></div>
+    </div>
+  </details>
+</template>

package/src/components/OcSheet.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+/**
+ * Side panel on a native <dialog>. v-model:open. Slots: header (replaces title + description),
+ * default (body), footer (scoped: { close }). Classes: dialog.oc-sheet(--left/--top/--bottom),
+ * .oc-sheet-content(--wide), -header, -title, -description, -body, -footer, -close.
+ */
+import { ref } from 'vue'
+import { useDialog } from '../composables/useDialog'
+import { useUid } from '../composables/useUid'
+
+withDefaults(
+  defineProps<{
+    side?: 'right' | 'left' | 'top' | 'bottom'
+    wide?: boolean
+    title?: string
+    description?: string
+    closeLabel?: string
+  }>(),
+  { side: 'right', closeLabel: 'Close' },
+)
+const open = defineModel<boolean>('open', { default: false })
+const el = ref<HTMLDialogElement | null>(null)
+const { onClose } = useDialog(open, el)
+const titleId = useUid('oc-sheet-title')
+const close = () => (open.value = false)
+defineExpose({ close })
+</script>
+
+<template>
+  <dialog
+    ref="el"
+    :class="['oc-sheet', side !== 'right' && `oc-sheet--${side}`]"
+    closedby="any"
+    :aria-labelledby="title ? titleId : undefined"
+    @close="onClose"
+  >
+    <div :class="['oc-sheet-content', wide && 'oc-sheet-content--wide']">
+      <button class="oc-sheet-close" type="button" :aria-label="closeLabel" @click="close">&times;</button>
+      <div v-if="title || description || $slots.header" class="oc-sheet-header">
+        <slot name="header">
+          <h2 v-if="title" :id="titleId" class="oc-sheet-title">{{ title }}</h2>
+          <p v-if="description" class="oc-sheet-description">{{ description }}</p>
+        </slot>
+      </div>
+      <div v-if="$slots.default" class="oc-sheet-body"><slot /></div>
+      <div v-if="$slots.footer" class="oc-sheet-footer"><slot name="footer" :close="close" /></div>
+    </div>
+  </dialog>
+</template>

package/src/components/OcSidebar.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+/**
+ * Vertical navigation shell. Slots: header, default (scrolling content: OcSidebarGroup...), footer.
+ * Classes: .oc-sidebar(--collapsed/--right/--floating/--dark), -header, -content, -footer.
+ * Compose with OcSidebarGroup, OcSidebarMenu, OcSidebarMenuButton, OcSidebarCollapsible, OcSidebarSeparator.
+ */
+defineProps<{ collapsed?: boolean; right?: boolean; floating?: boolean; dark?: boolean; label?: string }>()
+</script>
+
+<template>
+  <aside :class="['oc-sidebar', collapsed && 'oc-sidebar--collapsed', right && 'oc-sidebar--right', floating && 'oc-sidebar--floating', dark && 'oc-sidebar--dark']" :aria-label="label">
+    <div v-if="$slots.header" class="oc-sidebar-header"><slot name="header" /></div>
+    <div class="oc-sidebar-content"><slot /></div>
+    <div v-if="$slots.footer" class="oc-sidebar-footer"><slot name="footer" /></div>
+  </aside>
+</template>

package/src/components/OcSidebarCollapsible.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+/** Expandable sidebar item (details). v-model:open. Slots: icon, label (or `label` prop), default (sub items as <li>). */
+defineProps<{ label?: string }>()
+const open = defineModel<boolean>('open', { default: false })
+
+function onToggle(e: Event) {
+  open.value = (e.target as HTMLDetailsElement).open
+}
+</script>
+
+<template>
+  <details class="oc-sidebar-collapsible" :open="open" @toggle="onToggle">
+    <summary class="oc-sidebar-menu-button">
+      <slot name="icon" />
+      <span class="oc-sidebar-menu-label"><slot name="label">{{ label }}</slot></span>
+    </summary>
+    <ul class="oc-sidebar-menu-sub"><slot /></ul>
+  </details>
+</template>

package/src/components/OcSidebarGroup.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+/** Group of sidebar items with an optional heading (`label`). */
+defineProps<{ label?: string }>()
+</script>
+
+<template>
+  <div class="oc-sidebar-group">
+    <div v-if="label" class="oc-sidebar-group-label">{{ label }}</div>
+    <slot />
+  </div>
+</template>

package/src/components/OcSidebarMenu.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+/** The <ul class="oc-sidebar-menu">; put <li> elements (each with an OcSidebarMenuButton or OcSidebarCollapsible) inside. */
+</script>
+
+<template>
+  <ul class="oc-sidebar-menu"><slot /></ul>
+</template>

package/src/components/OcSidebarMenuButton.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/**
+ * Sidebar item: <a> with `href`, otherwise <button>. State: `current` (aria-current="page"), `disabled`.
+ * Slots: icon (inline svg with class oc-sidebar-menu-icon), default (label). `badge` shows a count pill.
+ */
+import { computed } from 'vue'
+
+const props = defineProps<{
+  href?: string
+  current?: boolean
+  disabled?: boolean
+  large?: boolean
+  badge?: string | number
+}>()
+const tag = computed(() => (props.href ? 'a' : 'button'))
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :class="['oc-sidebar-menu-button', large && 'oc-sidebar-menu-button--lg']"
+    :href="href"
+    :type="tag === 'button' ? 'button' : undefined"
+    :aria-current="current ? 'page' : undefined"
+    :aria-disabled="disabled ? 'true' : undefined"
+  >
+    <slot name="icon" />
+    <span class="oc-sidebar-menu-label"><slot /></span>
+    <span v-if="badge !== undefined" class="oc-sidebar-menu-badge">{{ badge }}</span>
+  </component>
+</template>

package/src/components/OcSidebarSeparator.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+/** Divider line between sidebar groups. */
+</script>
+
+<template>
+  <div class="oc-sidebar-separator"></div>
+</template>

package/src/components/OcSkeleton.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+/** Loading skeleton. Classes: .oc-skeleton--circle/rect/text/title */
+withDefaults(defineProps<{ variant?: 'text' | 'title' | 'circle' | 'rect' }>(), { variant: 'text' })
+</script>
+
+<template>
+  <div :class="['oc-skeleton', `oc-skeleton--${variant}`]"></div>
+</template>

package/src/components/OcSlider.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+/**
+ * Native range input. v-model: number. Keeps --oc-slider-progress in sync (the fill for Chromium/WebKit).
+ * Native attributes (id, aria-label, disabled...) fall through to the input. Classes: .oc-slider(--vertical)
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{ min?: number; max?: number; step?: number; vertical?: boolean }>(), { min: 0, max: 100 })
+const model = defineModel<number>({ default: 0 })
+const progress = computed(() => {
+  const span = props.max - props.min
+  const pct = span > 0 ? ((model.value - props.min) / span) * 100 : 0
+  return `${Math.min(100, Math.max(0, pct))}%`
+})
+</script>
+
+<template>
+  <input
+    v-model.number="model"
+    :class="['oc-slider', vertical && 'oc-slider--vertical']"
+    type="range"
+    :min="min"
+    :max="max"
+    :step="step"
+    :style="{ '--oc-slider-progress': progress }"
+  />
+</template>

package/src/components/OcSortableRow.vue

@@ -0,0 +1,40 @@
+<!-- File: packages/vue/src/components/OcSortableRow.vue | Map: tr.oc-sortable-row -> grip cell (button) -> default slot (cells) -->
+<script setup lang="ts">
+/**
+ * Table row with a drag grip. Styling only: listen to @dragstart / @dragover / @drop on the component
+ * (they fall through to the <tr>) and set `dragging` / `drop` yourself. Emits `grip-keydown` for keyboard moves.
+ * Classes: tr.oc-sortable-row(.is-dragging/.is-drop-before/.is-drop-after), td.oc-sortable-row-grip-cell, button.oc-sortable-row-grip
+ */
+withDefaults(
+  defineProps<{
+    gripLabel: string
+    dragging?: boolean
+    drop?: 'before' | 'after' | null
+    locked?: boolean
+    /** Picked up with the keyboard (aria-pressed). Leave undefined when not used. */
+    grabbed?: boolean
+  }>(),
+  // Vue casts a missing boolean prop to false; undefined keeps aria-pressed off the grip.
+  { grabbed: undefined, drop: null },
+)
+const emit = defineEmits<{ 'grip-keydown': [e: KeyboardEvent] }>()
+</script>
+
+<template>
+  <tr
+    :class="['oc-sortable-row', dragging && 'is-dragging', drop && `is-drop-${drop}`]"
+    :draggable="locked ? undefined : 'true'"
+  >
+    <td class="oc-sortable-row-grip-cell">
+      <button
+        class="oc-sortable-row-grip"
+        type="button"
+        :aria-label="gripLabel"
+        :aria-pressed="grabbed"
+        :disabled="locked"
+        @keydown="emit('grip-keydown', $event)"
+      ></button>
+    </td>
+    <slot />
+  </tr>
+</template>

package/src/components/OcSpinner.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+/** Loading ring (inherits currentColor). With a `label` it is a role=status; without one it is aria-hidden (e.g. inside a button). Classes: .oc-spinner(--sm/--lg/--xl/--primary/--muted) */
+defineProps<{ size?: 'sm' | 'md' | 'lg' | 'xl'; color?: 'primary' | 'muted'; label?: string }>()
+</script>
+
+<template>
+  <span
+    :class="['oc-spinner', size && size !== 'md' && `oc-spinner--${size}`, color && `oc-spinner--${color}`]"
+    :role="label ? 'status' : undefined"
+    :aria-label="label"
+    :aria-hidden="label ? undefined : 'true'"
+  ></span>
+</template>

package/src/components/OcStackCard.vue

@@ -0,0 +1,24 @@
+<!-- File: packages/vue/src/components/OcStackCard.vue | Map: props -> article -> deck (OcMediaThumb cover + count) -> title link + meta -->
+<script setup lang="ts">
+/**
+ * Stacked deck card for playlists / courses (same markup as snippets/stack-card.html).
+ * Props: title, href (link covers the card), meta, count ("12 videos"), panel (side panel count), thumb (props for OcMediaThumb).
+ * Slots: count (replaces the count text), meta. Classes: .oc-stack-card(--panel), __deck, __count, __title, __meta
+ */
+import OcMediaThumb from './OcMediaThumb.vue'
+
+defineProps<{ title: string; href: string; meta?: string; count?: string; panel?: boolean; thumb?: Record<string, unknown> }>()
+</script>
+
+<template>
+  <article :class="['oc-stack-card', panel && 'oc-stack-card--panel']">
+    <div class="oc-stack-card__deck">
+      <OcMediaThumb v-bind="thumb" />
+      <span v-if="count || $slots.count" class="oc-stack-card__count"><slot name="count">{{ count }}</slot></span>
+    </div>
+    <div>
+      <h3 class="oc-stack-card__title"><a :href="href">{{ title }}</a></h3>
+      <p v-if="meta || $slots.meta" class="oc-stack-card__meta"><slot name="meta">{{ meta }}</slot></p>
+    </div>
+  </article>
+</template>

package/src/components/OcStackList.vue

@@ -0,0 +1,31 @@
+<!-- File: packages/vue/src/components/OcStackList.vue | Map: props (items, neutral, size) -> ul.oc-stack-list -> li pills -->
+<script setup lang="ts">
+/**
+ * Technology pills. Pass `items` (strings or { label, icon }), or your own li.oc-stack-list__item in the default slot.
+ * Classes: .oc-stack-list (--neutral, --sm), __item, __icon. Accent: class="oc-accent--violet".
+ */
+export interface StackListItem {
+  label: string
+  icon?: string
+}
+withDefaults(
+  defineProps<{
+    items?: Array<string | StackListItem>
+    neutral?: boolean
+    size?: 'default' | 'sm'
+  }>(),
+  { items: () => [], size: 'default' },
+)
+const label = (item: string | StackListItem) => (typeof item === 'string' ? item : item.label)
+const icon = (item: string | StackListItem) => (typeof item === 'string' ? undefined : item.icon)
+</script>
+
+<template>
+  <ul :class="['oc-stack-list', neutral && 'oc-stack-list--neutral', size === 'sm' && 'oc-stack-list--sm']">
+    <slot>
+      <li v-for="(item, i) in items" :key="i" class="oc-stack-list__item">
+        <span v-if="icon(item)" class="oc-stack-list__icon" aria-hidden="true">{{ icon(item) }}</span>{{ label(item) }}
+      </li>
+    </slot>
+  </ul>
+</template>

package/src/components/OcStatCard.vue

@@ -0,0 +1,39 @@
+<!-- File: packages/vue/src/components/OcStatCard.vue | Map: card (div / a / button) -> icon slot -> body (value + trend, label) -->
+<script setup lang="ts">
+/**
+ * Compact KPI tile. With `href` it is a link, with `button` a button (listen to @click), otherwise a div.
+ * Put several in a <div class="oc-stat-card-grid">. Slots: icon.
+ * Classes: .oc-stat-card(--accent/--success/--warning/--stripe), -icon, -body, -value, -label, -trend(--up/--down)
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    value: string | number
+    label: string
+    trend?: string
+    trendDirection?: 'up' | 'down'
+    tone?: 'default' | 'accent' | 'success' | 'warning'
+    stripe?: boolean
+    href?: string
+    button?: boolean
+  }>(),
+  { trendDirection: 'up', tone: 'default' },
+)
+const tag = computed(() => (props.href ? 'a' : props.button ? 'button' : 'div'))
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :class="['oc-stat-card', tone !== 'default' && `oc-stat-card--${tone}`, stripe && 'oc-stat-card--stripe']"
+    :href="href"
+    :type="button && !href ? 'button' : undefined"
+  >
+    <span v-if="$slots.icon" class="oc-stat-card-icon" aria-hidden="true"><slot name="icon" /></span>
+    <span class="oc-stat-card-body">
+      <span class="oc-stat-card-value">{{ value }}<span v-if="trend" :class="['oc-stat-card-trend', `oc-stat-card-trend--${trendDirection}`]">{{ trend }}</span></span>
+      <span class="oc-stat-card-label">{{ label }}</span>
+    </span>
+  </component>
+</template>

package/src/components/OcStepper.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+/**
+ * Wizard step navigation. v-model = index of the active step (0-based); earlier steps are done and
+ * clickable, later steps are disabled. Classes: .oc-stepper(--horizontal), .oc-stepper-item(--done/--active),
+ * -label, -meta.
+ */
+export interface StepperStep {
+  label: string
+  /** Small text under the label, e.g. 2/4 */
+  meta?: string
+}
+defineProps<{ steps: StepperStep[]; horizontal?: boolean; label?: string }>()
+const current = defineModel<number>({ default: 0 })
+</script>
+
+<template>
+  <ol :class="['oc-stepper', horizontal && 'oc-stepper--horizontal']" :aria-label="label">
+    <li v-for="(step, i) in steps" :key="i">
+      <button
+        :class="['oc-stepper-item', i < current && 'oc-stepper-item--done', i === current && 'oc-stepper-item--active']"
+        type="button"
+        :aria-current="i === current ? 'step' : undefined"
+        :disabled="i > current"
+        @click="current = i"
+      >
+        <span v-if="step.meta">
+          <span class="oc-stepper-label">{{ step.label }}</span>
+          <span class="oc-stepper-meta">{{ step.meta }}</span>
+        </span>
+        <span v-else class="oc-stepper-label">{{ step.label }}</span>
+      </button>
+    </li>
+  </ol>
+</template>

package/src/components/OcSwitch.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+/** Toggle switch on a checkbox (role="switch"). v-model: boolean. Extra attributes go to the input. */
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+
+defineOptions({ inheritAttrs: false })
+const model = defineModel<boolean>({ default: false })
+const { root, control } = useAttrsSplit()
+</script>
+
+<template>
+  <label v-bind="root" class="oc-switch">
+    <input v-bind="control" v-model="model" type="checkbox" role="switch" />
+    <span class="oc-switch-track"></span>
+  </label>
+</template>