@birdycom/omniaui-vue 0.12.4 → 0.12.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui-vue",
-  "version": "0.12.4",
+  "version": "0.12.5",
   "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/components/OcLanguageSelect.vue

@@ -30,7 +30,7 @@ const { root, control } = useAttrsSplit()
     <span class="oc-language-select-icon" aria-hidden="true">
       <slot name="icon">
         <template v-if="icon || currency">{{ icon ?? '€' }}</template>
-        <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></svg>
+        <svg data-icon="mdi:web" v-else viewBox="0 0 24 24" fill="currentColor"><path d="M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2s.06-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.92 7.92 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8 8 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.7 15.7 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2"/></svg>
       </slot>
     </span>
     <select v-bind="control" v-model="model" class="oc-language-select-control" :aria-label="label ?? (currency ? 'Currency' : 'Language')">

package/src/components/OcListToolbar.vue

@@ -30,11 +30,11 @@ const name = useUid('oc-list-view')
       <label v-for="v in views" :key="v.value" class="oc-list-toolbar-view" :title="v.label">
         <input v-model="view" type="radio" :name="name" :value="v.value" :aria-label="v.label" />
         <slot name="view-icon" :view="v">
-          <!-- Built-in icons for the three common views. -->
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <template v-if="v.value === 'cards'"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></template>
-            <path v-else-if="v.value === 'table'" d="M3 5h18M3 12h18M3 19h18" />
-            <path v-else d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
+          <!-- Built-in webicons for the three common views (mdi:view-grid-outline, mdi:table, mdi:format-list-bulleted). -->
+          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path v-if="v.value === 'cards'" d="M3 11h8V3H3m2 2h4v4H5m8 12h8v-8h-8m2 2h4v4h-4M3 21h8v-8H3m2 2h4v4H5m8-16v8h8V3m-2 6h-4V5h4Z" />
+            <path v-else-if="v.value === 'table'" d="M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2m0 4v4h6V8zm8 0v4h6V8zm-8 6v4h6v-4zm8 0v4h6v-4z" />
+            <path v-else d="M7 5h14v2H7zm0 8v-2h14v2zM4 4.5A1.5 1.5 0 0 1 5.5 6A1.5 1.5 0 0 1 4 7.5A1.5 1.5 0 0 1 2.5 6A1.5 1.5 0 0 1 4 4.5m0 6A1.5 1.5 0 0 1 5.5 12A1.5 1.5 0 0 1 4 13.5A1.5 1.5 0 0 1 2.5 12A1.5 1.5 0 0 1 4 10.5M7 19v-2h14v2zm-3-2.5A1.5 1.5 0 0 1 5.5 18A1.5 1.5 0 0 1 4 19.5A1.5 1.5 0 0 1 2.5 18A1.5 1.5 0 0 1 4 16.5" />
           </svg>
         </slot>
       </label>

package/src/components/OcMessage.vue

@@ -29,8 +29,8 @@ export interface MessageData {
   id?: string
 }
 export const MESSAGE_ICONS: Record<string, string> = {
-  reply: 'M9 14 4 9l5-5M4 9h10a6 6 0 0 1 6 6v4',
-  delete: 'M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6',
+  reply: 'M8 9.8v.9l1.7.3c2.6.4 4.5 1.4 5.9 2.7c-1.7-.5-3.5-.8-5.6-.8H8v1.3L5.8 12zM10 5l-7 7l7 7v-4.1c5 0 8.5 1.6 11 5.1c-1-5-4-10-11-11',
+  delete: 'M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z',
 }
 </script>
 
@@ -79,12 +79,12 @@ const file = (a: MessageAttachment) => strip(a) as AttachmentFile
       </div>
       <p v-if="time || status" class="oc-message__meta">
         <time v-if="time" :datetime="datetime">{{ time }}</time>
-        <span v-if="status" :class="['oc-message__status', status !== 'sent' && `oc-message__status--${status}`]"><svg v-if="statusIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12.5 7 17.5 18 6.5M13 16.5l1 1L22.5 9" /></svg>{{ statusLabel ?? STATUS[status] }}</span>
+        <span v-if="status" :class="['oc-message__status', status !== 'sent' && `oc-message__status--${status}`]"><svg data-icon="mdi:check-all" v-if="statusIcon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M.41 13.41L6 19l1.41-1.42L1.83 12m20.41-6.42L11.66 16.17L7.5 12l-1.43 1.41L11.66 19l12-12M18 7l-1.41-1.42l-6.35 6.35l1.42 1.41z"/></svg>{{ statusLabel ?? STATUS[status] }}</span>
       </p>
     </div>
     <div v-if="actions?.length" class="oc-message__actions">
       <button v-for="a in actions" :key="a.name" type="button" :class="['oc-message__action', a.destructive && 'oc-message__action--destructive']" :aria-label="a.label" @click="emit('action', a.name)">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path :d="MESSAGE_ICONS[a.icon ?? a.name] ?? MESSAGE_ICONS.reply" /></svg>
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path :d="MESSAGE_ICONS[a.icon ?? a.name] ?? MESSAGE_ICONS.reply" /></svg>
       </button>
     </div>
   </article>

package/src/components/OcMessageThread.vue

@@ -116,7 +116,7 @@ function ctrlEnter(e: KeyboardEvent) {
       <div v-if="status || menu" class="oc-message-thread__actions">
         <span v-if="status" :class="['oc-badge', status.variant && `oc-badge--${status.variant}`]">{{ status.label }}</span>
         <template v-if="menu">
-          <button type="button" class="oc-message-thread__icon-btn" :popovertarget="`${base}-menu`" aria-label="Conversation actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.8" /><circle cx="12" cy="12" r="1.8" /><circle cx="12" cy="19" r="1.8" /></svg></button>
+          <button type="button" class="oc-message-thread__icon-btn" :popovertarget="`${base}-menu`" aria-label="Conversation actions"><svg data-icon="mdi:dots-vertical" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2"/></svg></button>
           <div :id="`${base}-menu`" class="oc-dropdown-menu" popover role="menu">
             <template v-for="(m, i) in menu" :key="i">
               <div v-if="'separator' in m" class="oc-dropdown-separator" role="separator"></div>

package/src/components/OcUser.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-/** Avatar with name and e-mail (truncating). `initials` or `src` fill the avatar; slot `avatar` replaces it. */
-defineProps<{
+/** Avatar with name and e-mail (truncating). `initials` (default: from `name`) or `src` fill the avatar; slot `avatar` replaces it. */
+import { computed } from 'vue'
+
+const props = defineProps<{
   name: string
   email?: string
   initials?: string
   src?: string
   avatarSize?: 'sm' | 'md' | 'lg' | 'xl'
 }>()
+
+const shownInitials = computed(() => props.initials ?? props.name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join(''))
 </script>
 
 <template>
@@ -14,7 +18,7 @@ defineProps<{
     <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>
+        <template v-else>{{ shownInitials }}</template>
       </span>
     </slot>
     <span class="oc-user-text">