@birdycom/omniaui-vue 0.11.0 → 0.11.2

package/src/components/OcSidebarMenuButton.vue

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

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

package/src/components/OcSkeleton.vue

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

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

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

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

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

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

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

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

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