@birdycom/omniaui-vue 0.11.0 → 0.11.2

package/src/components/OcRadioGroup.vue

@@ -1,32 +1,32 @@
-<script setup lang="ts">
-/**
- * Radio group (fieldset). v-model = value of the checked radio. Pass `options` or put OcRadio items in the default slot.
- * `legend` renders a legend; `row` lays the items out horizontally; `card` makes the option items bordered cards.
- * Classes: .oc-radio-group(--row)
- */
-import { computed, provide } from 'vue'
-import { useUid } from '../composables/useUid'
-import { radioGroupKey } from '../composables/keys'
-import OcRadio from './OcRadio.vue'
-
-export interface RadioOption {
-  value: string | number
-  label: string
-  description?: string
-  disabled?: boolean
-}
-
-const props = defineProps<{ legend?: string; options?: RadioOption[]; name?: string; row?: boolean; card?: boolean }>()
-const model = defineModel<string | number>()
-const uid = useUid('oc-radio')
-provide(radioGroupKey, { model, name: computed(() => props.name ?? uid), card: computed(() => !!props.card) })
-</script>
-
-<template>
-  <fieldset :class="['oc-radio-group', row && 'oc-radio-group--row']">
-    <legend v-if="legend" class="oc-label">{{ legend }}</legend>
-    <slot>
-      <OcRadio v-for="o in options" :key="o.value" :value="o.value" :disabled="o.disabled" :description="o.description">{{ o.label }}</OcRadio>
-    </slot>
-  </fieldset>
-</template>
+<script setup lang="ts">
+/**
+ * Radio group (fieldset). v-model = value of the checked radio. Pass `options` or put OcRadio items in the default slot.
+ * `legend` renders a legend; `row` lays the items out horizontally; `card` makes the option items bordered cards.
+ * Classes: .oc-radio-group(--row)
+ */
+import { computed, provide } from 'vue'
+import { useUid } from '../composables/useUid'
+import { radioGroupKey } from '../composables/keys'
+import OcRadio from './OcRadio.vue'
+
+export interface RadioOption {
+  value: string | number
+  label: string
+  description?: string
+  disabled?: boolean
+}
+
+const props = defineProps<{ legend?: string; options?: RadioOption[]; name?: string; row?: boolean; card?: boolean }>()
+const model = defineModel<string | number>()
+const uid = useUid('oc-radio')
+provide(radioGroupKey, { model, name: computed(() => props.name ?? uid), card: computed(() => !!props.card) })
+</script>
+
+<template>
+  <fieldset :class="['oc-radio-group', row && 'oc-radio-group--row']">
+    <legend v-if="legend" class="oc-label">{{ legend }}</legend>
+    <slot>
+      <OcRadio v-for="o in options" :key="o.value" :value="o.value" :disabled="o.disabled" :description="o.description">{{ o.label }}</OcRadio>
+    </slot>
+  </fieldset>
+</template>

package/src/components/OcRecoveryCodes.vue

@@ -1,55 +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>
+<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

@@ -1,15 +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>
+<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

@@ -1,28 +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>
+<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

@@ -1,21 +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>
+<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

@@ -1,18 +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>
+<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

@@ -1,46 +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>
+<!-- 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

@@ -1,49 +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>
+<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/OcSidebarCollapsible.vue

@@ -1,19 +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>
+<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

@@ -1,11 +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>
+<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

@@ -1,7 +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>
+<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>