@birdycom/omniaui-vue 0.11.0 → 0.11.2

package/src/components/OcTable.vue

@@ -1,115 +1,115 @@
-<script setup lang="ts">
-/**
- * Data table: sortable header (v-model:sort), row selection (v-model:selected), row actions, empty state,
- * density modifiers. Slots: `cell-<key>` (scoped: { row, value }), `actions` (scoped: { row }), `empty`.
- * Classes: .oc-table-wrap > .oc-table(--striped/--compact/--borderless/--sticky), .oc-table-sort,
- * .oc-table-actions, .oc-table-empty; aria-sort / aria-selected / data-numeric attributes.
- */
-import { computed, useSlots } from 'vue'
-
-export interface TableColumn {
-  key: string
-  label: string
-  sortable?: boolean
-  numeric?: boolean
-  width?: string
-}
-export interface TableSort {
-  key: string
-  direction: 'ascending' | 'descending'
-}
-
-const props = withDefaults(
-  defineProps<{
-    columns: TableColumn[]
-    rows: Record<string, any>[]
-    rowKey?: string
-    caption?: string
-    striped?: boolean
-    compact?: boolean
-    borderless?: boolean
-    sticky?: boolean
-    selectable?: boolean
-    actionsLabel?: string
-    selectAllLabel?: string
-  }>(),
-  { rowKey: 'id', actionsLabel: 'Actions', selectAllLabel: 'Select all' },
-)
-const selected = defineModel<(string | number)[]>('selected', { default: () => [] })
-const sort = defineModel<TableSort | null>('sort', { default: null })
-const slots = useSlots()
-
-const hasActions = computed(() => !!slots.actions)
-const colspan = computed(() => props.columns.length + (props.selectable ? 1 : 0) + (hasActions.value ? 1 : 0))
-const allSelected = computed(() => props.rows.length > 0 && props.rows.every((r) => selected.value.includes(r[props.rowKey])))
-
-function toggleAll(e: Event) {
-  selected.value = (e.target as HTMLInputElement).checked ? props.rows.map((r) => r[props.rowKey]) : []
-}
-function toggleRow(id: string | number, checked: boolean) {
-  selected.value = checked ? [...selected.value, id] : selected.value.filter((x) => x !== id)
-}
-function ariaSort(key: string) {
-  return sort.value?.key === key ? sort.value.direction : undefined
-}
-function toggleSort(e: Event, key: string) {
-  e.preventDefault()
-  const next = sort.value?.key === key && sort.value.direction === 'ascending' ? 'descending' : 'ascending'
-  sort.value = { key, direction: next }
-}
-function rowLabel(row: Record<string, any>) {
-  return `Select ${String(row[props.columns[0]?.key] ?? '')}`.trim()
-}
-</script>
-
-<template>
-  <div class="oc-table-wrap">
-    <table
-      :class="['oc-table', striped && 'oc-table--striped', compact && 'oc-table--compact', borderless && 'oc-table--borderless', sticky && 'oc-table--sticky']"
-    >
-      <caption v-if="caption">{{ caption }}</caption>
-      <thead>
-        <tr>
-          <th v-if="selectable" style="width: 2.5rem">
-            <input class="oc-checkbox" type="checkbox" :checked="allSelected" :aria-label="selectAllLabel" @change="toggleAll" />
-          </th>
-          <th
-            v-for="col in columns"
-            :key="col.key"
-            :aria-sort="ariaSort(col.key)"
-            :data-numeric="col.numeric ? '' : undefined"
-            :style="col.width ? { width: col.width } : undefined"
-          >
-            <a v-if="col.sortable" class="oc-table-sort" :href="`?sort=${col.key}`" @click="toggleSort($event, col.key)">{{ col.label }}</a>
-            <template v-else>{{ col.label }}</template>
-          </th>
-          <th v-if="hasActions"><span class="oc-visually-hidden">{{ actionsLabel }}</span></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="row in rows"
-          :key="row[rowKey]"
-          :aria-selected="selected.includes(row[rowKey]) ? 'true' : undefined"
-        >
-          <td v-if="selectable">
-            <input
-              class="oc-checkbox"
-              type="checkbox"
-              :checked="selected.includes(row[rowKey])"
-              :aria-label="rowLabel(row)"
-              @change="toggleRow(row[rowKey], ($event.target as HTMLInputElement).checked)"
-            />
-          </td>
-          <td v-for="col in columns" :key="col.key" :data-numeric="col.numeric ? '' : undefined">
-            <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">{{ row[col.key] }}</slot>
-          </td>
-          <td v-if="hasActions" class="oc-table-actions"><slot name="actions" :row="row" /></td>
-        </tr>
-        <tr v-if="rows.length === 0 && $slots.empty" class="oc-table-empty">
-          <td :colspan="colspan"><slot name="empty" :row="{}" /></td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Data table: sortable header (v-model:sort), row selection (v-model:selected), row actions, empty state,
+ * density modifiers. Slots: `cell-<key>` (scoped: { row, value }), `actions` (scoped: { row }), `empty`.
+ * Classes: .oc-table-wrap > .oc-table(--striped/--compact/--borderless/--sticky), .oc-table-sort,
+ * .oc-table-actions, .oc-table-empty; aria-sort / aria-selected / data-numeric attributes.
+ */
+import { computed, useSlots } from 'vue'
+
+export interface TableColumn {
+  key: string
+  label: string
+  sortable?: boolean
+  numeric?: boolean
+  width?: string
+}
+export interface TableSort {
+  key: string
+  direction: 'ascending' | 'descending'
+}
+
+const props = withDefaults(
+  defineProps<{
+    columns: TableColumn[]
+    rows: Record<string, any>[]
+    rowKey?: string
+    caption?: string
+    striped?: boolean
+    compact?: boolean
+    borderless?: boolean
+    sticky?: boolean
+    selectable?: boolean
+    actionsLabel?: string
+    selectAllLabel?: string
+  }>(),
+  { rowKey: 'id', actionsLabel: 'Actions', selectAllLabel: 'Select all' },
+)
+const selected = defineModel<(string | number)[]>('selected', { default: () => [] })
+const sort = defineModel<TableSort | null>('sort', { default: null })
+const slots = useSlots()
+
+const hasActions = computed(() => !!slots.actions)
+const colspan = computed(() => props.columns.length + (props.selectable ? 1 : 0) + (hasActions.value ? 1 : 0))
+const allSelected = computed(() => props.rows.length > 0 && props.rows.every((r) => selected.value.includes(r[props.rowKey])))
+
+function toggleAll(e: Event) {
+  selected.value = (e.target as HTMLInputElement).checked ? props.rows.map((r) => r[props.rowKey]) : []
+}
+function toggleRow(id: string | number, checked: boolean) {
+  selected.value = checked ? [...selected.value, id] : selected.value.filter((x) => x !== id)
+}
+function ariaSort(key: string) {
+  return sort.value?.key === key ? sort.value.direction : undefined
+}
+function toggleSort(e: Event, key: string) {
+  e.preventDefault()
+  const next = sort.value?.key === key && sort.value.direction === 'ascending' ? 'descending' : 'ascending'
+  sort.value = { key, direction: next }
+}
+function rowLabel(row: Record<string, any>) {
+  return `Select ${String(row[props.columns[0]?.key] ?? '')}`.trim()
+}
+</script>
+
+<template>
+  <div class="oc-table-wrap">
+    <table
+      :class="['oc-table', striped && 'oc-table--striped', compact && 'oc-table--compact', borderless && 'oc-table--borderless', sticky && 'oc-table--sticky']"
+    >
+      <caption v-if="caption">{{ caption }}</caption>
+      <thead>
+        <tr>
+          <th v-if="selectable" style="width: 2.5rem">
+            <input class="oc-checkbox" type="checkbox" :checked="allSelected" :aria-label="selectAllLabel" @change="toggleAll" />
+          </th>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            :aria-sort="ariaSort(col.key)"
+            :data-numeric="col.numeric ? '' : undefined"
+            :style="col.width ? { width: col.width } : undefined"
+          >
+            <a v-if="col.sortable" class="oc-table-sort" :href="`?sort=${col.key}`" @click="toggleSort($event, col.key)">{{ col.label }}</a>
+            <template v-else>{{ col.label }}</template>
+          </th>
+          <th v-if="hasActions"><span class="oc-visually-hidden">{{ actionsLabel }}</span></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="row in rows"
+          :key="row[rowKey]"
+          :aria-selected="selected.includes(row[rowKey]) ? 'true' : undefined"
+        >
+          <td v-if="selectable">
+            <input
+              class="oc-checkbox"
+              type="checkbox"
+              :checked="selected.includes(row[rowKey])"
+              :aria-label="rowLabel(row)"
+              @change="toggleRow(row[rowKey], ($event.target as HTMLInputElement).checked)"
+            />
+          </td>
+          <td v-for="col in columns" :key="col.key" :data-numeric="col.numeric ? '' : undefined">
+            <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">{{ row[col.key] }}</slot>
+          </td>
+          <td v-if="hasActions" class="oc-table-actions"><slot name="actions" :row="row" /></td>
+        </tr>
+        <tr v-if="rows.length === 0 && $slots.empty" class="oc-table-empty">
+          <td :colspan="colspan"><slot name="empty" :row="{}" /></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/components/OcTableActions.vue

@@ -1,26 +1,26 @@
-<!-- File: packages/vue/src/components/OcTableActions.vue | Map: td.oc-table-actions -> icon actions (default slot) OR overflow trigger + popover menu (default slot = menu items) -->
-<script setup lang="ts">
-/**
- * Row actions cell. Two modes:
- * - no `menuLabel`: the default slot holds icon actions (`a` / `button` with class oc-table-actions-icon(--primary/--success/--destructive)).
- * - with `menuLabel`: a three dots trigger opens a native popover; the default slot holds `.oc-dropdown-item`s.
- * Classes: td.oc-table-actions(--icons), .oc-table-actions-icon, .oc-table-actions-more, .oc-dropdown-menu[popover]
- */
-import { useUid } from '../composables/useUid'
-
-defineProps<{
-  /** Accessible name of the overflow trigger, e.g. "Actions for Ada". Turns on menu mode. */
-  menuLabel?: string
-}>()
-const menuId = useUid('oc-table-actions-menu')
-</script>
-
-<template>
-  <td :class="['oc-table-actions', !menuLabel && 'oc-table-actions--icons']">
-    <template v-if="menuLabel">
-      <button class="oc-table-actions-more" type="button" :popovertarget="menuId" :aria-label="menuLabel"></button>
-      <div :id="menuId" class="oc-dropdown-menu" popover><slot /></div>
-    </template>
-    <slot v-else />
-  </td>
-</template>
+<!-- File: packages/vue/src/components/OcTableActions.vue | Map: td.oc-table-actions -> icon actions (default slot) OR overflow trigger + popover menu (default slot = menu items) -->
+<script setup lang="ts">
+/**
+ * Row actions cell. Two modes:
+ * - no `menuLabel`: the default slot holds icon actions (`a` / `button` with class oc-table-actions-icon(--primary/--success/--destructive)).
+ * - with `menuLabel`: a three dots trigger opens a native popover; the default slot holds `.oc-dropdown-item`s.
+ * Classes: td.oc-table-actions(--icons), .oc-table-actions-icon, .oc-table-actions-more, .oc-dropdown-menu[popover]
+ */
+import { useUid } from '../composables/useUid'
+
+defineProps<{
+  /** Accessible name of the overflow trigger, e.g. "Actions for Ada". Turns on menu mode. */
+  menuLabel?: string
+}>()
+const menuId = useUid('oc-table-actions-menu')
+</script>
+
+<template>
+  <td :class="['oc-table-actions', !menuLabel && 'oc-table-actions--icons']">
+    <template v-if="menuLabel">
+      <button class="oc-table-actions-more" type="button" :popovertarget="menuId" :aria-label="menuLabel"></button>
+      <div :id="menuId" class="oc-dropdown-menu" popover><slot /></div>
+    </template>
+    <slot v-else />
+  </td>
+</template>

package/src/components/OcTableCompact.vue

@@ -1,46 +1,46 @@
-<!-- File: packages/vue/src/components/OcTableCompact.vue | Map: wrapper div -> table.oc-table (thead from columns, tbody from rows, tfoot from footer) OR default slot -->
-<script setup lang="ts">
-/**
- * Small striped table for inside cards. Pass `columns` + `rows` (+ `footer` total row), or put your own
- * <table class="oc-table"> in the default slot. Scoped slot `cell` ({ row, column }) customises body cells.
- * Classes: .oc-table-compact(--bordered/--plain), .oc-table-compact-muted, [data-numeric], [data-wrap]
- */
-export interface TableCompactColumn {
-  key: string
-  label: string
-  numeric?: boolean
-  wrap?: boolean
-}
-
-withDefaults(
-  defineProps<{
-    columns?: TableCompactColumn[]
-    rows?: Array<Record<string, unknown>>
-    footer?: Record<string, unknown>
-    bordered?: boolean
-    plain?: boolean
-  }>(),
-  { rows: () => [] },
-)
-// data-* attributes only when switched on (an empty string means "present").
-const cellAttrs = (c: TableCompactColumn) => ({ 'data-numeric': c.numeric ? '' : undefined, 'data-wrap': c.wrap ? '' : undefined })
-</script>
-
-<template>
-  <div :class="['oc-table-compact', bordered && 'oc-table-compact--bordered', plain && 'oc-table-compact--plain']">
-    <table v-if="columns" class="oc-table">
-      <thead>
-        <tr><th v-for="c in columns" :key="c.key" v-bind="cellAttrs(c)">{{ c.label }}</th></tr>
-      </thead>
-      <tbody>
-        <tr v-for="(row, i) in rows" :key="i">
-          <td v-for="c in columns" :key="c.key" v-bind="cellAttrs(c)"><slot name="cell" :row="row" :column="c">{{ row[c.key] }}</slot></td>
-        </tr>
-      </tbody>
-      <tfoot v-if="footer">
-        <tr><td v-for="c in columns" :key="c.key" v-bind="cellAttrs(c)">{{ footer[c.key] }}</td></tr>
-      </tfoot>
-    </table>
-    <slot v-else />
-  </div>
-</template>
+<!-- File: packages/vue/src/components/OcTableCompact.vue | Map: wrapper div -> table.oc-table (thead from columns, tbody from rows, tfoot from footer) OR default slot -->
+<script setup lang="ts">
+/**
+ * Small striped table for inside cards. Pass `columns` + `rows` (+ `footer` total row), or put your own
+ * <table class="oc-table"> in the default slot. Scoped slot `cell` ({ row, column }) customises body cells.
+ * Classes: .oc-table-compact(--bordered/--plain), .oc-table-compact-muted, [data-numeric], [data-wrap]
+ */
+export interface TableCompactColumn {
+  key: string
+  label: string
+  numeric?: boolean
+  wrap?: boolean
+}
+
+withDefaults(
+  defineProps<{
+    columns?: TableCompactColumn[]
+    rows?: Array<Record<string, unknown>>
+    footer?: Record<string, unknown>
+    bordered?: boolean
+    plain?: boolean
+  }>(),
+  { rows: () => [] },
+)
+// data-* attributes only when switched on (an empty string means "present").
+const cellAttrs = (c: TableCompactColumn) => ({ 'data-numeric': c.numeric ? '' : undefined, 'data-wrap': c.wrap ? '' : undefined })
+</script>
+
+<template>
+  <div :class="['oc-table-compact', bordered && 'oc-table-compact--bordered', plain && 'oc-table-compact--plain']">
+    <table v-if="columns" class="oc-table">
+      <thead>
+        <tr><th v-for="c in columns" :key="c.key" v-bind="cellAttrs(c)">{{ c.label }}</th></tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, i) in rows" :key="i">
+          <td v-for="c in columns" :key="c.key" v-bind="cellAttrs(c)"><slot name="cell" :row="row" :column="c">{{ row[c.key] }}</slot></td>
+        </tr>
+      </tbody>
+      <tfoot v-if="footer">
+        <tr><td v-for="c in columns" :key="c.key" v-bind="cellAttrs(c)">{{ footer[c.key] }}</td></tr>
+      </tfoot>
+    </table>
+    <slot v-else />
+  </div>
+</template>

package/src/components/OcTabs.vue

@@ -1,37 +1,37 @@
-<script setup lang="ts">
-/**
- * Tabs with radio inputs and :has() (the CSS switches the panels). v-model = value of the active tab.
- * One named slot per tab value renders its panel: <template #account>...</template>.
- * Classes: .oc-tabset, .oc-tab-list, .oc-tab-trigger, .oc-tab-panel
- */
-import { useUid } from '../composables/useUid'
-
-export interface TabItem {
-  label: string
-  /** Slot name and model value; defaults to the label. */
-  value?: string
-}
-defineProps<{ tabs: TabItem[]; name?: string }>()
-const model = defineModel<string>()
-const uid = useUid('oc-tabs')
-</script>
-
-<template>
-  <div class="oc-tabset">
-    <div class="oc-tab-list" role="tablist">
-      <label v-for="(tab, i) in tabs" :key="tab.value ?? tab.label" class="oc-tab-trigger">
-        <input
-          v-model="model"
-          type="radio"
-          :name="name ?? uid"
-          :value="tab.value ?? tab.label"
-          :checked="model === undefined && i === 0"
-        />
-        {{ tab.label }}
-      </label>
-    </div>
-    <div v-for="tab in tabs" :key="tab.value ?? tab.label" class="oc-tab-panel">
-      <slot :name="tab.value ?? tab.label" />
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Tabs with radio inputs and :has() (the CSS switches the panels). v-model = value of the active tab.
+ * One named slot per tab value renders its panel: <template #account>...</template>.
+ * Classes: .oc-tabset, .oc-tab-list, .oc-tab-trigger, .oc-tab-panel
+ */
+import { useUid } from '../composables/useUid'
+
+export interface TabItem {
+  label: string
+  /** Slot name and model value; defaults to the label. */
+  value?: string
+}
+defineProps<{ tabs: TabItem[]; name?: string }>()
+const model = defineModel<string>()
+const uid = useUid('oc-tabs')
+</script>
+
+<template>
+  <div class="oc-tabset">
+    <div class="oc-tab-list" role="tablist">
+      <label v-for="(tab, i) in tabs" :key="tab.value ?? tab.label" class="oc-tab-trigger">
+        <input
+          v-model="model"
+          type="radio"
+          :name="name ?? uid"
+          :value="tab.value ?? tab.label"
+          :checked="model === undefined && i === 0"
+        />
+        {{ tab.label }}
+      </label>
+    </div>
+    <div v-for="tab in tabs" :key="tab.value ?? tab.label" class="oc-tab-panel">
+      <slot :name="tab.value ?? tab.label" />
+    </div>
+  </div>
+</template>

package/src/components/OcTagInput.vue

@@ -1,50 +1,50 @@
-<script setup lang="ts">
-/**
- * Chips with remove buttons and a free-text input with suggestions. v-model: string[].
- * Enter or comma adds the typed tag, Backspace on an empty input removes the last one.
- * Classes: .oc-tag, .oc-tag-remove, .oc-tag-input, .oc-tag-suggestions
- */
-import { computed, ref } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    suggestions?: string[]
-    placeholder?: string
-    label?: string
-  }>(),
-  { suggestions: () => [], placeholder: 'Add tag...', label: 'Add tag' },
-)
-const tags = defineModel<string[]>({ default: () => [] })
-const draft = ref('')
-const available = computed(() => props.suggestions.filter((s) => !tags.value.includes(s)))
-
-function add(value: string) {
-  const tag = value.trim()
-  if (tag && !tags.value.includes(tag)) tags.value = [...tags.value, tag]
-  draft.value = ''
-}
-function remove(tag: string) {
-  tags.value = tags.value.filter((t) => t !== tag)
-}
-function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'Enter' || e.key === ',') {
-    e.preventDefault()
-    add(draft.value)
-  } else if (e.key === 'Backspace' && !draft.value && tags.value.length) {
-    tags.value = tags.value.slice(0, -1)
-  }
-}
-</script>
-
-<template>
-  <div class="oc-tag-input">
-    <span v-for="tag in tags" :key="tag" class="oc-tag">
-      {{ tag }}
-      <button class="oc-tag-remove" type="button" :aria-label="`Remove ${tag}`" @click="remove(tag)">&times;</button>
-    </span>
-    <input v-model="draft" type="text" :placeholder="placeholder" :aria-label="label" @keydown="onKeydown" />
-  </div>
-  <div v-if="available.length" class="oc-tag-suggestions">
-    <button v-for="s in available" :key="s" type="button" @click="add(s)">{{ s }}</button>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Chips with remove buttons and a free-text input with suggestions. v-model: string[].
+ * Enter or comma adds the typed tag, Backspace on an empty input removes the last one.
+ * Classes: .oc-tag, .oc-tag-remove, .oc-tag-input, .oc-tag-suggestions
+ */
+import { computed, ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    suggestions?: string[]
+    placeholder?: string
+    label?: string
+  }>(),
+  { suggestions: () => [], placeholder: 'Add tag...', label: 'Add tag' },
+)
+const tags = defineModel<string[]>({ default: () => [] })
+const draft = ref('')
+const available = computed(() => props.suggestions.filter((s) => !tags.value.includes(s)))
+
+function add(value: string) {
+  const tag = value.trim()
+  if (tag && !tags.value.includes(tag)) tags.value = [...tags.value, tag]
+  draft.value = ''
+}
+function remove(tag: string) {
+  tags.value = tags.value.filter((t) => t !== tag)
+}
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter' || e.key === ',') {
+    e.preventDefault()
+    add(draft.value)
+  } else if (e.key === 'Backspace' && !draft.value && tags.value.length) {
+    tags.value = tags.value.slice(0, -1)
+  }
+}
+</script>
+
+<template>
+  <div class="oc-tag-input">
+    <span v-for="tag in tags" :key="tag" class="oc-tag">
+      {{ tag }}
+      <button class="oc-tag-remove" type="button" :aria-label="`Remove ${tag}`" @click="remove(tag)">&times;</button>
+    </span>
+    <input v-model="draft" type="text" :placeholder="placeholder" :aria-label="label" @keydown="onKeydown" />
+  </div>
+  <div v-if="available.length" class="oc-tag-suggestions">
+    <button v-for="s in available" :key="s" type="button" @click="add(s)">{{ s }}</button>
+  </div>
+</template>