@birdycom/omniaui-vue 0.13.0 → 0.14.0

package/manifest.json

@@ -156,6 +156,12 @@
       "file": "src/components/OcButtonGroupText.vue",
       "snippet": null
     },
+    {
+      "name": "OcCallout",
+      "kind": "component",
+      "file": "src/components/OcCallout.vue",
+      "snippet": "@birdycom/omniaui/snippets/callout.html"
+    },
     {
       "name": "OcCard",
       "kind": "component",
@@ -390,6 +396,12 @@
       "file": "src/components/OcGreeting.vue",
       "snippet": "@birdycom/omniaui/snippets/greeting.html"
     },
+    {
+      "name": "OcGroup",
+      "kind": "component",
+      "file": "src/components/OcGroup.vue",
+      "snippet": "@birdycom/omniaui/snippets/group.html"
+    },
     {
       "name": "OcHeading",
       "kind": "component",
@@ -534,6 +546,12 @@
       "file": "src/components/OcMediaThumb.vue",
       "snippet": "@birdycom/omniaui/snippets/media-thumb.html"
     },
+    {
+      "name": "OcMenuStatic",
+      "kind": "component",
+      "file": "src/components/OcMenuStatic.vue",
+      "snippet": "@birdycom/omniaui/snippets/menu-static.html"
+    },
     {
       "name": "OcMessage",
       "kind": "component",
@@ -618,6 +636,12 @@
       "file": "src/components/OcPanel.vue",
       "snippet": "@birdycom/omniaui/snippets/panel.html"
     },
+    {
+      "name": "OcParticleField",
+      "kind": "component",
+      "file": "src/components/OcParticleField.vue",
+      "snippet": "@birdycom/omniaui/snippets/particle-field.html"
+    },
     {
       "name": "OcPasswordInput",
       "kind": "component",
@@ -708,6 +732,12 @@
       "file": "src/components/OcRatingInput.vue",
       "snippet": "@birdycom/omniaui/snippets/rating.html"
     },
+    {
+      "name": "OcReading",
+      "kind": "component",
+      "file": "src/components/OcReading.vue",
+      "snippet": "@birdycom/omniaui/snippets/reading.html"
+    },
     {
       "name": "OcRecoveryCodes",
       "kind": "component",

package/package.json

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

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 /**
  * Button. Renders <a> when `href` is set, otherwise <button>.
- * Classes: .oc-btn + --secondary/--outline/--ghost/--link/--destructive/--success/--gradient/--glass,
+ * Classes: .oc-btn + --secondary/--outline/--ghost/--link/--destructive/--success/--gradient/--glass/--neon,
  * --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'
+      | 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | 'success' | 'gradient' | 'glass' | 'neon'
       | 'soft-primary' | 'soft-success' | 'soft-warning' | 'soft-destructive' | 'soft-info' | 'plain'
     size?: 'xs' | 'sm' | 'md' | 'lg'
     icon?: boolean

package/src/components/OcCallout.vue

@@ -0,0 +1,11 @@
+<!-- File: packages/vue/src/components/OcCallout.vue | Map: card row -> text (default slot) -> action (slot) -->
+<script setup lang="ts">
+/** Small card with a text on the left (default slot) and an action on the right (slot `action`). */
+</script>
+
+<template>
+  <div class="oc-callout">
+    <div class="oc-callout__text"><slot /></div>
+    <div v-if="$slots.action" class="oc-callout__action"><slot name="action" /></div>
+  </div>
+</template>

package/src/components/OcDropdownItem.vue

@@ -1,9 +1,19 @@
 <script setup lang="ts">
-/** Menu item: <a> with `href`, otherwise <button>. */
-defineProps<{ href?: string }>()
+/** Menu item: <a> with `href`, otherwise <button>. checked (true/false) adds a check column, hint a muted text on the right. */
+withDefaults(defineProps<{ href?: string; checked?: boolean; hint?: string }>(), { checked: undefined })
 </script>
 
 <template>
-  <a v-if="href" class="oc-dropdown-item" :href="href"><slot /></a>
-  <button v-else class="oc-dropdown-item" type="button"><slot /></button>
+  <component
+    :is="href ? 'a' : 'button'"
+    class="oc-dropdown-item"
+    :href="href"
+    :type="href ? undefined : 'button'"
+    :role="checked !== undefined ? 'menuitemcheckbox' : undefined"
+    :aria-checked="checked !== undefined ? String(checked) : undefined"
+  >
+    <span v-if="checked !== undefined" class="oc-dropdown-check" aria-hidden="true"></span>
+    <slot />
+    <span v-if="hint" class="oc-dropdown-hint">{{ hint }}</span>
+  </component>
 </template>

package/src/components/OcGroup.vue

@@ -0,0 +1,16 @@
+<!-- File: packages/vue/src/components/OcGroup.vue | Map: section -> head (title + aside) -> meta -> content (slot) -->
+<script setup lang="ts">
+/** One section in a panel: title, a status on the right (aside, asideTone), a muted line (meta) and the content. */
+withDefaults(defineProps<{ title: string; aside?: string; asideTone?: 'busy' | 'ok' | 'warn' | 'error'; meta?: string; headingLevel?: 2 | 3 | 4 }>(), { headingLevel: 2 })
+</script>
+
+<template>
+  <section class="oc-group">
+    <header class="oc-group__head">
+      <component :is="`h${headingLevel}`" class="oc-group__title">{{ title }}</component>
+      <span v-if="aside || $slots.aside" class="oc-group__aside" :data-tone="asideTone"><slot name="aside">{{ aside }}</slot></span>
+    </header>
+    <p v-if="meta" class="oc-group__meta">{{ meta }}</p>
+    <slot />
+  </section>
+</template>

package/src/components/OcLanguageSelect.vue

@@ -18,6 +18,8 @@ defineProps<{
   label?: string
   currency?: boolean
   ghost?: boolean
+  /** Closed it shows only the code ("NL"), the value in upper case */
+  code?: boolean
   /** Text icon, e.g. "€" (default: globe, or € with `currency`) */
   icon?: string
 }>()
@@ -26,7 +28,7 @@ const { root, control } = useAttrsSplit()
 </script>
 
 <template>
-  <label v-bind="root" :class="['oc-language-select', ghost && 'oc-language-select--ghost', currency && 'oc-language-select--currency']">
+  <label v-bind="root" :class="['oc-language-select', ghost && 'oc-language-select--ghost', currency && 'oc-language-select--currency', code && 'oc-language-select--code']" :data-code="code ? String(model ?? options[0]?.value ?? '').toUpperCase() : undefined">
     <span class="oc-language-select-icon" aria-hidden="true">
       <slot name="icon">
         <template v-if="icon || currency">{{ icon ?? '€' }}</template>

package/src/components/OcMenuStatic.vue

@@ -0,0 +1,9 @@
+<!-- File: packages/vue/src/components/OcMenuStatic.vue | Map: div.oc-dropdown-menu--static -> items (slot) -->
+<script setup lang="ts">
+/** The dropdown menu as a surface of its own (a tray menu). Items: OcDropdownItem (checked, hint), OcDropdownLabel. */
+defineProps<{ flat?: boolean }>()
+</script>
+
+<template>
+  <div role="menu" :class="['oc-dropdown-menu', 'oc-dropdown-menu--static', flat && 'oc-dropdown-menu--flat']"><slot /></div>
+</template>

package/src/components/OcMeterRow.vue

@@ -1,9 +1,9 @@
 <!-- File: packages/vue/src/components/OcMeterRow.vue | Map: props -> level from the percentage -> row markup -->
 <script setup lang="ts">
-/** Usage line: label, percentage and amount, a colored bar (warn from 75, critical from 90) and the reset line. */
+/** Usage line: label, percentage and amount, a colored bar (warn from 75, critical from 90), a sub-line (sub, subPercent) and the reset line. */
 import { computed } from 'vue'
 
-const props = defineProps<{ label: string; percent: number; value?: string; reset?: string; level?: 'ok' | 'warn' | 'critical' }>()
+const props = defineProps<{ label: string; percent: number; value?: string; reset?: string; level?: 'ok' | 'warn' | 'critical'; sub?: string; subPercent?: number; subLevel?: 'warn' | 'critical' }>()
 const pct = computed(() => Math.max(0, Math.min(100, Math.round(props.percent))))
 const tone = computed(() => props.level ?? (pct.value >= 90 ? 'critical' : pct.value >= 75 ? 'warn' : 'ok'))
 </script>
@@ -13,6 +13,7 @@ const tone = computed(() => props.level ?? (pct.value >= 90 ? 'critical' : pct.v
     <span class="oc-meter-row__label">{{ label }}</span>
     <span class="oc-meter-row__value"><strong>{{ pct }}%</strong><template v-if="value"> · {{ value }}</template></span>
     <span class="oc-meter-row__bar" role="meter" aria-valuemin="0" aria-valuemax="100" :aria-valuenow="pct" :aria-label="label"></span>
+    <span v-if="sub" class="oc-meter-row__sub">{{ sub }}<span v-if="subPercent != null" class="oc-meter-row__subbar" :data-level="subLevel" :style="{ '--oc-meter': `${Math.max(0, Math.min(100, subPercent))}%` }"></span></span>
     <span v-if="reset" class="oc-meter-row__reset">{{ reset }}</span>
   </div>
 </template>

package/src/components/OcParticleField.vue

@@ -0,0 +1,23 @@
+<!-- File: packages/vue/src/components/OcParticleField.vue | Map: canvas.oc-particles -> start on mount (particles.js) -> stop on unmount -->
+<script setup lang="ts">
+/** Background canvas with drifting points and lines; one still frame with reduced motion. local = fill the positioned parent. */
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { initParticles } from '../../../ui/src/particles.js'
+
+const props = defineProps<{ count?: number; speed?: number; link?: number; local?: boolean }>()
+const canvas = ref<HTMLCanvasElement | null>(null)
+let stop = () => {}
+const start = () => {
+  stop()
+  if (!canvas.value) return
+  const options = Object.fromEntries(Object.entries({ count: props.count, speed: props.speed, link: props.link }).filter(([, v]) => v != null))
+  stop = initParticles(canvas.value, options)
+}
+onMounted(start)
+watch(() => [props.count, props.speed, props.link], start)
+onBeforeUnmount(() => stop())
+</script>
+
+<template>
+  <canvas ref="canvas" aria-hidden="true" :class="['oc-particles', local && 'oc-particles--local']"></canvas>
+</template>

package/src/components/OcReading.vue

@@ -0,0 +1,9 @@
+<!-- File: packages/vue/src/components/OcReading.vue | Map: span.oc-reading (+ level) -> value (slot) -->
+<script setup lang="ts">
+/** A small measured value ("57 °C") in tabular numbers. level: cool (default), warm, hot. */
+defineProps<{ level?: 'cool' | 'warm' | 'hot' }>()
+</script>
+
+<template>
+  <span :class="['oc-reading', level && level !== 'cool' && `oc-reading--${level}`]"><slot /></span>
+</template>

package/src/index.ts

@@ -27,6 +27,7 @@ import OcBusyOverlay from './components/OcBusyOverlay.vue'
 import OcButton from './components/OcButton.vue'
 import OcButtonGroup from './components/OcButtonGroup.vue'
 import OcButtonGroupText from './components/OcButtonGroupText.vue'
+import OcCallout from './components/OcCallout.vue'
 import OcCard from './components/OcCard.vue'
 import OcChartLine from './components/OcChartLine.vue'
 import OcChatComposer from './components/OcChatComposer.vue'
@@ -66,6 +67,7 @@ import OcGlass from './components/OcGlass.vue'
 import OcGlassBar from './components/OcGlassBar.vue'
 import OcGlassPanel from './components/OcGlassPanel.vue'
 import OcGreeting from './components/OcGreeting.vue'
+import OcGroup from './components/OcGroup.vue'
 import OcHeading from './components/OcHeading.vue'
 import OcHoverCard from './components/OcHoverCard.vue'
 import OcImageZoom from './components/OcImageZoom.vue'
@@ -90,6 +92,7 @@ import OcMarquee from './components/OcMarquee.vue'
 import OcMediaCard from './components/OcMediaCard.vue'
 import OcMediaRow from './components/OcMediaRow.vue'
 import OcMediaThumb from './components/OcMediaThumb.vue'
+import OcMenuStatic from './components/OcMenuStatic.vue'
 import OcMessage from './components/OcMessage.vue'
 import OcMessageList from './components/OcMessageList.vue'
 import OcMessageThread from './components/OcMessageThread.vue'
@@ -104,6 +107,7 @@ import OcOtpInput from './components/OcOtpInput.vue'
 import OcPageHeader from './components/OcPageHeader.vue'
 import OcPagination from './components/OcPagination.vue'
 import OcPanel from './components/OcPanel.vue'
+import OcParticleField from './components/OcParticleField.vue'
 import OcPasswordInput from './components/OcPasswordInput.vue'
 import OcPasswordRequirements from './components/OcPasswordRequirements.vue'
 import OcPhoneInput from './components/OcPhoneInput.vue'
@@ -119,6 +123,7 @@ import OcRadio from './components/OcRadio.vue'
 import OcRadioGroup from './components/OcRadioGroup.vue'
 import OcRating from './components/OcRating.vue'
 import OcRatingInput from './components/OcRatingInput.vue'
+import OcReading from './components/OcReading.vue'
 import OcRecoveryCodes from './components/OcRecoveryCodes.vue'
 import OcResult from './components/OcResult.vue'
 import OcRibbon from './components/OcRibbon.vue'
@@ -234,6 +239,7 @@ export {
   OcButton,
   OcButtonGroup,
   OcButtonGroupText,
+  OcCallout,
   OcCard,
   OcChartLine,
   OcChatComposer,
@@ -273,6 +279,7 @@ export {
   OcGlassBar,
   OcGlassPanel,
   OcGreeting,
+  OcGroup,
   OcHeading,
   OcHoverCard,
   OcImageZoom,
@@ -297,6 +304,7 @@ export {
   OcMediaCard,
   OcMediaRow,
   OcMediaThumb,
+  OcMenuStatic,
   OcMessage,
   OcMessageList,
   OcMessageThread,
@@ -311,6 +319,7 @@ export {
   OcPageHeader,
   OcPagination,
   OcPanel,
+  OcParticleField,
   OcPasswordInput,
   OcPasswordRequirements,
   OcPhoneInput,
@@ -326,6 +335,7 @@ export {
   OcRadioGroup,
   OcRating,
   OcRatingInput,
+  OcReading,
   OcRecoveryCodes,
   OcResult,
   OcRibbon,
@@ -501,6 +511,7 @@ export const components: Record<string, Component> = {
   OcButton,
   OcButtonGroup,
   OcButtonGroupText,
+  OcCallout,
   OcCard,
   OcChartLine,
   OcChatComposer,
@@ -540,6 +551,7 @@ export const components: Record<string, Component> = {
   OcGlassBar,
   OcGlassPanel,
   OcGreeting,
+  OcGroup,
   OcHeading,
   OcHoverCard,
   OcImageZoom,
@@ -564,6 +576,7 @@ export const components: Record<string, Component> = {
   OcMediaCard,
   OcMediaRow,
   OcMediaThumb,
+  OcMenuStatic,
   OcMessage,
   OcMessageList,
   OcMessageThread,
@@ -578,6 +591,7 @@ export const components: Record<string, Component> = {
   OcPageHeader,
   OcPagination,
   OcPanel,
+  OcParticleField,
   OcPasswordInput,
   OcPasswordRequirements,
   OcPhoneInput,
@@ -593,6 +607,7 @@ export const components: Record<string, Component> = {
   OcRadioGroup,
   OcRating,
   OcRatingInput,
+  OcReading,
   OcRecoveryCodes,
   OcResult,
   OcRibbon,