@birdycom/omniaui-vue 0.12.4 → 0.12.6

package/manifest.json

@@ -84,6 +84,12 @@
       "file": "src/components/OcAvatarGroup.vue",
       "snippet": "@birdycom/omniaui/snippets/avatar.html"
     },
+    {
+      "name": "OcAvatarPicker",
+      "kind": "component",
+      "file": "src/components/OcAvatarPicker.vue",
+      "snippet": "@birdycom/omniaui/snippets/avatar-picker.html"
+    },
     {
       "name": "OcBackLink",
       "kind": "component",
@@ -96,6 +102,12 @@
       "file": "src/components/OcBadge.vue",
       "snippet": "@birdycom/omniaui/snippets/badge.html"
     },
+    {
+      "name": "OcBarcode",
+      "kind": "component",
+      "file": "src/components/OcBarcode.vue",
+      "snippet": "@birdycom/omniaui/snippets/barcode.html"
+    },
     {
       "name": "OcBarcodeInput",
       "kind": "component",
@@ -192,12 +204,6 @@
       "file": "src/components/OcColorSelect.vue",
       "snippet": "@birdycom/omniaui/snippets/color-select.html"
     },
-    {
-      "name": "OcColumnMenu",
-      "kind": "component",
-      "file": "src/components/OcColumnMenu.vue",
-      "snippet": "@birdycom/omniaui/snippets/column-menu.html"
-    },
     {
       "name": "OcCommand",
       "kind": "component",
@@ -234,6 +240,18 @@
       "file": "src/components/OcDataTable.vue",
       "snippet": "@birdycom/omniaui/snippets/data-table.html"
     },
+    {
+      "name": "OcDataTableName",
+      "kind": "component",
+      "file": "src/components/OcDataTableName.vue",
+      "snippet": null
+    },
+    {
+      "name": "OcDateField",
+      "kind": "component",
+      "file": "src/components/OcDateField.vue",
+      "snippet": "@birdycom/omniaui/snippets/date-field.html"
+    },
     {
       "name": "OcDecimalInput",
       "kind": "component",
@@ -324,12 +342,30 @@
       "file": "src/components/OcFormField.vue",
       "snippet": "@birdycom/omniaui/snippets/form-field.html"
     },
+    {
+      "name": "OcFormSection",
+      "kind": "component",
+      "file": "src/components/OcFormSection.vue",
+      "snippet": "@birdycom/omniaui/snippets/form-section.html"
+    },
+    {
+      "name": "OcGallery",
+      "kind": "component",
+      "file": "src/components/OcGallery.vue",
+      "snippet": "@birdycom/omniaui/snippets/gallery.html"
+    },
     {
       "name": "OcGlass",
       "kind": "component",
       "file": "src/components/OcGlass.vue",
       "snippet": "@birdycom/omniaui/snippets/glass.html"
     },
+    {
+      "name": "OcGlassBar",
+      "kind": "component",
+      "file": "src/components/OcGlassBar.vue",
+      "snippet": null
+    },
     {
       "name": "OcGlassPanel",
       "kind": "component",
@@ -420,6 +456,12 @@
       "file": "src/components/OcLauncherCard.vue",
       "snippet": "@birdycom/omniaui/snippets/launcher-card.html"
     },
+    {
+      "name": "OcLazyImage",
+      "kind": "component",
+      "file": "src/components/OcLazyImage.vue",
+      "snippet": null
+    },
     {
       "name": "OcLightbox",
       "kind": "component",
@@ -492,12 +534,24 @@
       "file": "src/components/OcMessageThread.vue",
       "snippet": "@birdycom/omniaui/snippets/message-thread.html"
     },
+    {
+      "name": "OcMeterRow",
+      "kind": "component",
+      "file": "src/components/OcMeterRow.vue",
+      "snippet": "@birdycom/omniaui/snippets/meter-row.html"
+    },
     {
       "name": "OcModal",
       "kind": "component",
       "file": "src/components/OcModal.vue",
       "snippet": "@birdycom/omniaui/snippets/modal.html"
     },
+    {
+      "name": "OcNameCard",
+      "kind": "component",
+      "file": "src/components/OcNameCard.vue",
+      "snippet": "@birdycom/omniaui/snippets/name-card.html"
+    },
     {
       "name": "OcNavmenu",
       "kind": "component",
@@ -564,6 +618,12 @@
       "file": "src/components/OcPopover.vue",
       "snippet": "@birdycom/omniaui/snippets/popover.html"
     },
+    {
+      "name": "OcPrice",
+      "kind": "component",
+      "file": "src/components/OcPrice.vue",
+      "snippet": "@birdycom/omniaui/snippets/price.html"
+    },
     {
       "name": "OcPriceCard",
       "kind": "component",
@@ -594,6 +654,12 @@
       "file": "src/components/OcProse.vue",
       "snippet": "@birdycom/omniaui/snippets/prose.html"
     },
+    {
+      "name": "OcQuantity",
+      "kind": "component",
+      "file": "src/components/OcQuantity.vue",
+      "snippet": "@birdycom/omniaui/snippets/quantity.html"
+    },
     {
       "name": "OcRadio",
       "kind": "component",
@@ -606,12 +672,30 @@
       "file": "src/components/OcRadioGroup.vue",
       "snippet": null
     },
+    {
+      "name": "OcRating",
+      "kind": "component",
+      "file": "src/components/OcRating.vue",
+      "snippet": "@birdycom/omniaui/snippets/rating.html"
+    },
+    {
+      "name": "OcRatingInput",
+      "kind": "component",
+      "file": "src/components/OcRatingInput.vue",
+      "snippet": "@birdycom/omniaui/snippets/rating.html"
+    },
     {
       "name": "OcRecoveryCodes",
       "kind": "component",
       "file": "src/components/OcRecoveryCodes.vue",
       "snippet": "@birdycom/omniaui/snippets/recovery-codes.html"
     },
+    {
+      "name": "OcRibbon",
+      "kind": "component",
+      "file": "src/components/OcRibbon.vue",
+      "snippet": "@birdycom/omniaui/snippets/ribbon.html"
+    },
     {
       "name": "OcScrollArea",
       "kind": "component",
@@ -702,6 +786,12 @@
       "file": "src/components/OcSortableRow.vue",
       "snippet": "@birdycom/omniaui/snippets/sortable-row.html"
     },
+    {
+      "name": "OcSpecList",
+      "kind": "component",
+      "file": "src/components/OcSpecList.vue",
+      "snippet": "@birdycom/omniaui/snippets/spec-list.html"
+    },
     {
       "name": "OcSpinner",
       "kind": "component",
@@ -744,6 +834,12 @@
       "file": "src/components/OcStepper.vue",
       "snippet": "@birdycom/omniaui/snippets/stepper.html"
     },
+    {
+      "name": "OcStock",
+      "kind": "component",
+      "file": "src/components/OcStock.vue",
+      "snippet": "@birdycom/omniaui/snippets/stock.html"
+    },
     {
       "name": "OcSwitch",
       "kind": "component",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui-vue",
-  "version": "0.12.4",
+  "version": "0.12.6",
   "description": "OmniaUI for Vue 3: one single-file component per OmniaUI component and block, rendering the exact markup of the CSS packages.",
   "type": "module",
   "license": "MIT",

package/src/blocks/OcBlockAppHeader.vue

@@ -23,7 +23,7 @@ withDefaults(
   <header class="oc-block-appbar">
     <slot name="toggle">
       <label v-if="toggleFor" class="oc-btn oc-btn--ghost oc-btn--icon" :for="toggleFor" :title="toggleLabel">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
+        <svg data-icon="mdi:menu" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
         <span class="oc-visually-hidden">{{ toggleLabel }}</span>
       </label>
     </slot>

package/src/blocks/OcBlockDataTable.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * Card with title, actions, toolbar, table, bulk bar and footer. Put an <OcTable> in the default slot.
- * Slots: actions (header buttons), toolbar (.oc-table-toolbar content: search, filter pills, columns popover),
+ * Slots: actions (header buttons), toolbar (.oc-table-toolbar content: search, filter pills),
  * bulk (selection bar, shown when `selectedCount` > 0), default (table), footer (.oc-table-footer: entries text, page size, pagination).
  * Classes: .oc-card.oc-block-datatable, -head, -title, -description, -body, -bulk, .oc-table-toolbar, .oc-table-footer
  */

package/src/blocks/OcBlockProfileHeader.vue

@@ -2,15 +2,16 @@
 <script setup lang="ts">
 /**
  * Profile / channel header: banner, overhanging avatar, name, meta, bio, actions and link tabs.
- * Slots: avatar (initials or <img>), actions, bio. Classes: .oc-block-profile (--compact), -banner, -bar, -avatar,
+ * Slots: avatar (initials or <img>), actions, bio, panel-0, panel-1 … (with panel slots the tabs switch on the page
+ * itself: radios + panels, CSS only; without them the tabs are links). Classes: .oc-block-profile (--compact), -banner, -bar, -avatar,
  * -info, -name, -meta, -bio, -actions, -tabs, -tab (aria-current="page")
  */
-import { computed } from 'vue'
+import { computed, useSlots } from 'vue'
 import { useUid } from '../composables/useUid'
 
 export interface ProfileHeaderTab {
   label: string
-  href: string
+  href?: string
   current?: boolean
 }
 const props = withDefaults(
@@ -28,6 +29,8 @@ const props = withDefaults(
   { tabs: () => [], tabsLabel: 'Profile sections', headingLevel: 1 },
 )
 const nameId = useUid('oc-profile-name')
+const slots = useSlots()
+const panels = computed(() => props.tabs.some((_, i) => Boolean(slots[`panel-${i}`])))
 const bannerStyle = computed(() => (props.banner ? `--oc-profile-banner: url("${props.banner}")` : undefined))
 </script>
 
@@ -43,7 +46,15 @@ const bannerStyle = computed(() => (props.banner ? `--oc-profile-banner: url("${
       </div>
       <div v-if="$slots.actions" class="oc-block-profile-actions"><slot name="actions" /></div>
     </div>
-    <nav v-if="tabs.length" class="oc-block-profile-tabs" :aria-label="tabsLabel">
+    <template v-if="tabs.length && panels">
+      <div class="oc-block-profile-tabs" role="radiogroup" :aria-label="tabsLabel">
+        <label v-for="(tab, i) in tabs" :key="i" class="oc-block-profile-tab"><input type="radio" :name="`${nameId}-tab`" :checked="tab.current ?? i === 0">{{ tab.label }}</label>
+      </div>
+      <div class="oc-block-profile-panels">
+        <div v-for="(tab, i) in tabs" :key="i" class="oc-block-profile-panel"><slot :name="`panel-${i}`" /></div>
+      </div>
+    </template>
+    <nav v-else-if="tabs.length" class="oc-block-profile-tabs" :aria-label="tabsLabel">
       <a v-for="(tab, i) in tabs" :key="i" class="oc-block-profile-tab" :href="tab.href" :aria-current="tab.current ? 'page' : undefined">{{ tab.label }}</a>
     </nav>
   </section>

package/src/components/OcAttachmentList.vue

@@ -10,7 +10,7 @@ withDefaults(defineProps<{ items?: AttachmentFile[]; stack?: boolean; as?: 'ul'
   as: 'ul',
   label: 'Files in this message',
   items: () => [
-    { name: 'Quote kitchen Dewitte v2.pdf', size: '1.2 MB', href: '#quote.pdf' },
+    { name: 'Quote kitchen Project 1 v2.pdf', size: '1.2 MB', href: '#quote.pdf' },
     { name: 'Measurements ground floor.xlsx', size: '86 KB', href: '#measurements.xlsx' },
     { name: 'Contract addendum.docx', size: '240 KB', href: '#contract.docx' },
     { name: 'Plans architect.zip', size: '14.8 MB', href: '#plans.zip' },

package/src/components/OcAvatarPicker.vue

@@ -0,0 +1,34 @@
+<!-- File: packages/vue/src/components/OcAvatarPicker.vue | Map: props -> preview + file input -> text and buttons -> change event on mount -->
+<script setup lang="ts">
+/** Avatar or logo picker with a preview, Upload and Remove, and drag and drop. Emits change (File or null) and invalid (File, reason) for a wrong type or a file over maxKb. */
+import { onMounted, useId, useTemplateRef } from 'vue'
+import { bindAvatarPicker } from '../../../ui/src/form-extras.js'
+
+withDefaults(defineProps<{ initials: string; label?: string; hint?: string; logo?: boolean; name?: string; accept?: string; maxKb?: number }>(), { label: 'Profile picture', logo: false, accept: 'image/*' })
+const emit = defineEmits<{ change: [file: File | null]; invalid: [file: File, reason: string] }>()
+const id = useId()
+const root = useTemplateRef<HTMLDivElement>('root')
+onMounted(() => {
+  if (!root.value) return
+  bindAvatarPicker(root.value)
+  root.value.addEventListener('oc-avatar-change', (e) => emit('change', (e as CustomEvent<{ file: File | null }>).detail.file))
+  root.value.addEventListener('oc-avatar-invalid', (e) => { const d = (e as CustomEvent<{ file: File; reason: string }>).detail; emit('invalid', d.file, d.reason) })
+})
+</script>
+
+<template>
+  <div ref="root" :class="['oc-avatar-picker', logo && 'oc-avatar-picker--square oc-avatar-picker--logo']" :data-oc-max-kb="maxKb">
+    <label class="oc-avatar-picker__preview" :for="id" title="Choose an image">
+      <span data-oc-initials>{{ initials }}</span>
+      <input :id="id" class="oc-avatar-picker__file" type="file" :accept="accept" :name="name">
+    </label>
+    <div class="oc-avatar-picker__text">
+      <span class="oc-avatar-picker__label">{{ label }}</span>
+      <span v-if="hint" class="oc-avatar-picker__hint">{{ hint }}</span>
+      <div class="oc-avatar-picker__actions">
+        <button type="button" class="oc-btn oc-btn--outline oc-btn--sm" data-oc-avatar-upload><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 16v-6H5l7-7l7 7h-4v6zm-4 4v-2h14v2z" /></svg>Upload</button>
+        <button type="button" class="oc-btn oc-btn--ghost oc-btn--sm" data-oc-avatar-remove><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z" /></svg>Remove</button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/OcBarcode.vue

@@ -0,0 +1,23 @@
+<!-- File: packages/vue/src/components/OcBarcode.vue | Map: props -> encode -> svg + digits -->
+<script setup lang="ts">
+/** EAN-13, EAN-8, UPC-A or Code 128 as SVG; shows the reason when the value cannot be encoded. */
+import { computed } from 'vue'
+import { barsToSvg, encodeBarcode } from '../../../ui/src/barcode.js'
+
+const props = withDefaults(defineProps<{ value: string; format?: 'auto' | 'EAN13' | 'EAN8' | 'UPC' | 'CODE128'; digits?: boolean; size?: 'md' | 'hero' | 'compact' }>(), { format: 'auto', digits: true, size: 'md' })
+const result = computed(() => {
+  try {
+    const { bits, text } = encodeBarcode(props.value, props.format)
+    return { svg: barsToSvg(bits, `Barcode ${text}`), text, error: '' }
+  } catch (err) {
+    return { svg: '', text: props.value, error: (err as Error).message }
+  }
+})
+</script>
+
+<template>
+  <figure :class="['oc-barcode', size !== 'md' && `oc-barcode--${size}`]" :data-error="result.error ? '' : undefined">
+    <span v-if="result.svg" style="display: contents" v-html="result.svg"></span>
+    <figcaption v-if="digits || result.error" class="oc-barcode__digits">{{ result.error ? `${value}: ${result.error}` : result.text }}</figcaption>
+  </figure>
+</template>

package/src/components/OcBreadcrumb.vue

@@ -1,21 +1,30 @@
 <script setup lang="ts">
-/** Breadcrumb. Pass `items` (the last one is the current page) or use the default slot. */
+/**
+ * Breadcrumb. Pass `items` (the last one is the current page) or use the default slot.
+ * `icon` per item is a webicon name (mdi:home-outline …), drawn with <iconify-icon>; separator="chevron" puts › between.
+ */
 export interface BreadcrumbItem {
   label: string
   href?: string
+  icon?: string
 }
-withDefaults(defineProps<{ items?: BreadcrumbItem[]; label?: string }>(), {
+withDefaults(defineProps<{ items?: BreadcrumbItem[]; label?: string; separator?: 'slash' | 'chevron' }>(), {
   items: () => [],
   label: 'Breadcrumb',
+  separator: 'slash',
 })
 </script>
 
 <template>
-  <nav class="oc-breadcrumb" :aria-label="label">
+  <nav :class="['oc-breadcrumb', separator === 'chevron' && 'oc-breadcrumb--chevron']" :aria-label="label">
     <slot>
       <template v-for="(item, i) in items" :key="i">
-        <a v-if="item.href && i < items.length - 1" class="oc-breadcrumb-item" :href="item.href">{{ item.label }}</a>
-        <span v-else class="oc-breadcrumb-item" aria-current="page">{{ item.label }}</span>
+        <a v-if="item.href && i < items.length - 1" class="oc-breadcrumb-item" :href="item.href"
+          ><iconify-icon v-if="item.icon" :icon="item.icon" aria-hidden="true" />{{ item.label }}</a
+        >
+        <span v-else class="oc-breadcrumb-item" aria-current="page"
+          ><iconify-icon v-if="item.icon" :icon="item.icon" aria-hidden="true" />{{ item.label }}</span
+        >
       </template>
     </slot>
   </nav>

package/src/components/OcButton.vue

@@ -2,15 +2,20 @@
 /**
  * Button. Renders <a> when `href` is set, otherwise <button>.
  * Classes: .oc-btn + --secondary/--outline/--ghost/--link/--destructive/--success/--gradient/--glass,
- * --xs/--sm/--lg, --icon, --pill, --inline (link button inside running text)
+ * --soft-primary/-success/-warning/-destructive/-info (row actions), --plain (icon only, no surface),
+ * --xs/--sm/--lg, --icon, --pill, --inline (link button inside running text). `loading` sets aria-busy (spinner).
  */
 withDefaults(
   defineProps<{
-    variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | 'success' | 'gradient' | 'glass'
+    variant?:
+      | 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | 'success' | 'gradient' | 'glass'
+      | 'soft-primary' | 'soft-success' | 'soft-warning' | 'soft-destructive' | 'soft-info' | 'plain'
     size?: 'xs' | 'sm' | 'md' | 'lg'
     icon?: boolean
     pill?: boolean
     inline?: boolean
+    loading?: boolean
+    disabled?: boolean
     href?: string
     type?: 'button' | 'submit' | 'reset'
   }>(),
@@ -22,6 +27,7 @@ withDefaults(
   <a
     v-if="href"
     :href="href"
+    :aria-busy="loading || undefined"
     :class="[
       'oc-btn',
       variant !== 'default' && `oc-btn--${variant}`,
@@ -36,6 +42,8 @@ withDefaults(
   <button
     v-else
     :type="type"
+    :aria-busy="loading || undefined"
+    :disabled="disabled || loading"
     :class="[
       'oc-btn',
       variant !== 'default' && `oc-btn--${variant}`,

package/src/components/OcChatComposer.vue

@@ -36,7 +36,7 @@ function onKeydown(e: KeyboardEvent) {
     <div class="oc-chat-composer__bar">
       <div v-if="$slots.tools" class="oc-chat-composer__tools"><slot name="tools" /></div>
       <span v-if="hint" class="oc-chat-composer__hint">{{ hint }}</span>
-      <button type="submit" class="oc-chat-composer__send" aria-label="Send" :disabled="disabled">&#10148;</button>
+      <button type="submit" class="oc-chat-composer__send" aria-label="Send" :disabled="disabled"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2 21l21-9L2 3v7l15 2l-15 2z"/></svg></button>
     </div>
   </form>
 </template>