@birdycom/omniaui-vue 0.0.0-stage → 0.11.0

package/src/components/OcTopProgress.vue

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

package/src/components/OcTree.vue

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

package/src/components/OcUpgradeBanner.vue

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

package/src/components/OcUser.vue

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

package/src/components/OcVersionBanner.vue

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

package/src/composables/chartLine.ts

@@ -0,0 +1,28 @@
+// File: packages/vue/src/composables/chartLine.ts
+// Map: number format -> nice axis maximum -> smooth path (same geometry as the chart-line snippet and the React wrapper)
+
+/** Number with at most 2 decimals and no trailing zeros ("75", "37.5", "4.69"). */
+export const n2 = (n: number) => String(parseFloat(n.toFixed(2)))
+
+/** Round axis maximum: step = max / rows rounded up to 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8 or 10 x 10^k. */
+export function niceMax(value: number, rows = 4) {
+  if (value <= 0) return rows
+  const raw = value / rows
+  const pow = 10 ** Math.floor(Math.log10(raw))
+  return ([1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10].find((s) => s * pow >= raw) ?? 10) * pow * rows
+}
+
+/** Smooth path through the points (x 0-100, y = 100 - value / max * 100); control points stay between their two ends. */
+export function chartLinePath(values: number[], max: number) {
+  const pts = values.map((v, i) => [values.length > 1 ? (i / (values.length - 1)) * 100 : 50, 100 - (v / max) * 100])
+  if (!pts.length) return ''
+  const clamp = (v: number, a: number, b: number) => Math.min(Math.max(v, Math.min(a, b)), Math.max(a, b))
+  let d = `M${n2(pts[0][0])} ${n2(pts[0][1])}`
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i - 1] ?? pts[i], p1 = pts[i], p2 = pts[i + 1], p3 = pts[i + 2] ?? p2
+    const c1 = [p1[0] + (p2[0] - p0[0]) / 6, clamp(p1[1] + (p2[1] - p0[1]) / 6, p1[1], p2[1])]
+    const c2 = [p2[0] - (p3[0] - p1[0]) / 6, clamp(p2[1] - (p3[1] - p1[1]) / 6, p1[1], p2[1])]
+    d += ` C${n2(c1[0])} ${n2(c1[1])} ${n2(c2[0])} ${n2(c2[1])} ${n2(p2[0])} ${n2(p2[1])}`
+  }
+  return d
+}

package/src/composables/keys.ts

@@ -0,0 +1,22 @@
+import type { InjectionKey, Ref } from 'vue'
+
+/** Provided by OcRadioGroup, injected by OcRadio. */
+export interface RadioGroupContext {
+  model: Ref<string | number | undefined>
+  name: Ref<string>
+  card: Ref<boolean>
+}
+export const radioGroupKey: InjectionKey<RadioGroupContext> = Symbol('oc-radio-group')
+
+/** Provided by OcToggleGroup, injected by OcToggle. */
+export interface ToggleGroupContext {
+  /** Currently pressed values. */
+  values: Ref<string[]>
+  type: Ref<'single' | 'multiple'>
+  name: Ref<string>
+  toggle: (value: string) => void
+}
+export const toggleGroupKey: InjectionKey<ToggleGroupContext> = Symbol('oc-toggle-group')
+
+/** Provided by OcResizable, injected by OcResizablePanel. */
+export const resizableVerticalKey: InjectionKey<Ref<boolean>> = Symbol('oc-resizable-vertical')

package/src/composables/useAttrsSplit.ts

@@ -0,0 +1,16 @@
+import { computed, useAttrs } from 'vue'
+
+/**
+ * For components whose root is a wrapper (label, div) around the real form control:
+ * `class` and `style` stay on the wrapper, every other attribute (id, name, disabled,
+ * autocomplete, aria-*, listeners) goes to the control. Use with defineOptions({ inheritAttrs: false }).
+ */
+export function useAttrsSplit() {
+  const attrs = useAttrs()
+  const root = computed(() => ({ class: attrs.class, style: attrs.style }))
+  const control = computed(() => {
+    const { class: _c, style: _s, ...rest } = attrs
+    return rest
+  })
+  return { root, control }
+}

package/src/composables/useDialog.ts

@@ -0,0 +1,21 @@
+import { onMounted, watch, type Ref } from 'vue'
+
+/**
+ * Keeps a native <dialog> in sync with a boolean `open` model:
+ * open -> showModal(), closed -> close(). Native close (Esc, backdrop, form method=dialog)
+ * is reported through `onClose` so v-model:open stays correct.
+ */
+export function useDialog(open: Ref<boolean | undefined>, el: Ref<HTMLDialogElement | null>) {
+  function sync() {
+    const dialog = el.value
+    if (!dialog) return
+    if (open.value && !dialog.open) dialog.showModal()
+    else if (!open.value && dialog.open) dialog.close()
+  }
+  watch(open, sync, { flush: 'post' })
+  onMounted(sync)
+  function onClose() {
+    if (open.value) open.value = false
+  }
+  return { onClose }
+}

package/src/composables/useToast.ts

@@ -0,0 +1,66 @@
+import { reactive, readonly } from 'vue'
+
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info'
+
+export interface ToastOptions {
+  title: string
+  description?: string
+  variant?: ToastVariant
+  /** Milliseconds before auto-dismiss. 0 keeps the toast until dismissed. Default 5000. */
+  duration?: number
+}
+
+export interface ToastItem extends Required<Pick<ToastOptions, 'title' | 'variant'>> {
+  id: number
+  description?: string
+  duration: number
+}
+
+const state = reactive<{ toasts: ToastItem[] }>({ toasts: [] })
+const timers = new Map<number, ReturnType<typeof setTimeout>>()
+let nextId = 1
+
+function dismiss(id: number) {
+  const timer = timers.get(id)
+  if (timer) clearTimeout(timer)
+  timers.delete(id)
+  const i = state.toasts.findIndex((t) => t.id === id)
+  if (i !== -1) state.toasts.splice(i, 1)
+}
+
+function push(options: ToastOptions): number {
+  const id = nextId++
+  const item: ToastItem = {
+    id,
+    title: options.title,
+    description: options.description,
+    variant: options.variant ?? 'info',
+    duration: options.duration ?? 5000,
+  }
+  state.toasts.push(item)
+  if (item.duration > 0) timers.set(id, setTimeout(() => dismiss(id), item.duration))
+  return id
+}
+
+function clear() {
+  for (const t of [...state.toasts]) dismiss(t.id)
+}
+
+const shortcut =
+  (variant: ToastVariant) =>
+  (title: string, description?: string, options: Omit<ToastOptions, 'title' | 'description' | 'variant'> = {}) =>
+    push({ ...options, title, description, variant })
+
+/** Shared toast queue. Render it once with <OcToastContainer />. */
+export function useToast() {
+  return {
+    toasts: readonly(state).toasts,
+    push,
+    dismiss,
+    clear,
+    success: shortcut('success'),
+    error: shortcut('error'),
+    warning: shortcut('warning'),
+    info: shortcut('info'),
+  }
+}

package/src/composables/useUid.ts

@@ -0,0 +1,12 @@
+import * as Vue from 'vue'
+
+let counter = 0
+
+/**
+ * Stable unique id for aria-labelledby / popovertarget / label-for wiring.
+ * Uses Vue's built-in useId() when available (Vue >= 3.5, SSR safe), otherwise a counter.
+ */
+export function useUid(prefix = 'oc'): string {
+  const useId = (Vue as Record<string, unknown>)['useId'] as (() => string) | undefined
+  return `${prefix}-${useId ? useId() : ++counter}`
+}