@birdycom/omniaui-vue 0.12.2 → 0.12.3

package/manifest.json

@@ -324,6 +324,18 @@
       "file": "src/components/OcFormField.vue",
       "snippet": "@birdycom/omniaui/snippets/form-field.html"
     },
+    {
+      "name": "OcGlass",
+      "kind": "component",
+      "file": "src/components/OcGlass.vue",
+      "snippet": "@birdycom/omniaui/snippets/glass.html"
+    },
+    {
+      "name": "OcGlassPanel",
+      "kind": "component",
+      "file": "src/components/OcGlassPanel.vue",
+      "snippet": "@birdycom/omniaui/snippets/glass.html"
+    },
     {
       "name": "OcGreeting",
       "kind": "component",
@@ -714,6 +726,18 @@
       "file": "src/components/OcStatCard.vue",
       "snippet": "@birdycom/omniaui/snippets/stat-card.html"
     },
+    {
+      "name": "OcStatus",
+      "kind": "component",
+      "file": "src/components/OcStatus.vue",
+      "snippet": "@birdycom/omniaui/snippets/status-dot.html"
+    },
+    {
+      "name": "OcStatusDot",
+      "kind": "component",
+      "file": "src/components/OcStatusDot.vue",
+      "snippet": "@birdycom/omniaui/snippets/status-dot.html"
+    },
     {
       "name": "OcStepper",
       "kind": "component",
@@ -786,6 +810,30 @@
       "file": "src/components/OcTimeline.vue",
       "snippet": "@birdycom/omniaui/snippets/timeline.html"
     },
+    {
+      "name": "OcTitlebar",
+      "kind": "component",
+      "file": "src/components/OcTitlebar.vue",
+      "snippet": "@birdycom/omniaui/snippets/titlebar.html"
+    },
+    {
+      "name": "OcTitlebarBody",
+      "kind": "component",
+      "file": "src/components/OcTitlebarBody.vue",
+      "snippet": "@birdycom/omniaui/snippets/titlebar.html"
+    },
+    {
+      "name": "OcTitlebarButton",
+      "kind": "component",
+      "file": "src/components/OcTitlebarButton.vue",
+      "snippet": "@birdycom/omniaui/snippets/titlebar.html"
+    },
+    {
+      "name": "OcTitlebarWindow",
+      "kind": "component",
+      "file": "src/components/OcTitlebarWindow.vue",
+      "snippet": "@birdycom/omniaui/snippets/titlebar.html"
+    },
     {
       "name": "OcToast",
       "kind": "component",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui-vue",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "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/OcAlert.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-/** Alert. Classes: .oc-alert--info/success/warning/danger. Default slot = description. */
+/** Alert. Classes: .oc-alert--info/success/warning/danger, --inline (compact, under a field). Default slot = description. */
 withDefaults(
   defineProps<{
     variant?: 'info' | 'success' | 'warning' | 'danger'
     title?: string
+    inline?: boolean
   }>(),
   { variant: 'info' },
 )
 </script>
 
 <template>
-  <div :class="['oc-alert', `oc-alert--${variant}`]" role="status">
+  <div :class="['oc-alert', `oc-alert--${variant}`, inline && 'oc-alert--inline']" :role="variant === 'danger' && inline ? 'alert' : 'status'">
     <h4 v-if="title || $slots.title" class="oc-alert-title"><slot name="title">{{ title }}</slot></h4>
     <p v-if="$slots.default" class="oc-alert-description"><slot /></p>
   </div>

package/src/components/OcButton.vue

@@ -2,7 +2,7 @@
 /**
  * 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
+ * --xs/--sm/--lg, --icon, --pill, --inline (link button inside running text)
  */
 withDefaults(
   defineProps<{
@@ -10,6 +10,7 @@ withDefaults(
     size?: 'xs' | 'sm' | 'md' | 'lg'
     icon?: boolean
     pill?: boolean
+    inline?: boolean
     href?: string
     type?: 'button' | 'submit' | 'reset'
   }>(),
@@ -27,6 +28,7 @@ withDefaults(
       size !== 'md' && `oc-btn--${size}`,
       icon && 'oc-btn--icon',
       pill && 'oc-btn--pill',
+      inline && 'oc-btn--inline',
     ]"
   >
     <slot />
@@ -40,6 +42,7 @@ withDefaults(
       size !== 'md' && `oc-btn--${size}`,
       icon && 'oc-btn--icon',
       pill && 'oc-btn--pill',
+      inline && 'oc-btn--inline',
     ]"
   >
     <slot />

package/src/components/OcGlass.vue

@@ -0,0 +1,10 @@
+<!-- File: packages/vue/src/components/OcGlass.vue | Map: props (strong, flat, as) -> .oc-glass sheet -> default slot -->
+<script setup lang="ts">
+/** See-through glass sheet with a light top edge; .oc-card inside becomes a glass panel.
+ *  Classes: .oc-glass + --strong, --flat (desktop window where the OS draws the blur) */
+withDefaults(defineProps<{ strong?: boolean; flat?: boolean; as?: 'div' | 'section' | 'aside' | 'article' | 'main' }>(), { as: 'div' })
+</script>
+
+<template>
+  <component :is="as" :class="['oc-glass', strong && 'oc-glass--strong', flat && 'oc-glass--flat']"><slot /></component>
+</template>

package/src/components/OcGlassPanel.vue

@@ -0,0 +1,9 @@
+<!-- File: packages/vue/src/components/OcGlassPanel.vue | Map: props (strong) -> div.oc-glass-panel -> default slot -->
+<script setup lang="ts">
+/** A lighter layer inside a glass sheet. Classes: .oc-glass-panel(--strong) */
+defineProps<{ strong?: boolean }>()
+</script>
+
+<template>
+  <div :class="['oc-glass-panel', strong && 'oc-glass-panel--strong']"><slot /></div>
+</template>

package/src/components/OcProgress.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-/** Progress bar. `value` of `max` (default 100). Classes: .oc-progress-bar--success/warning/danger */
+/** Progress bar. `value` of `max` (default 100). Classes: .oc-progress(--sm/--xs/--glow), .oc-progress-bar--success/warning/danger,
+ *  .oc-progress-marker. `levels`: warning from 70 %, danger from 90 % (or [warning, danger]); an explicit variant wins.
+ *  `marker`: a target point in the unit of `value`. */
 import { computed } from 'vue'
 
 const props = withDefaults(
@@ -7,15 +9,33 @@ const props = withDefaults(
     value: number
     max?: number
     variant?: 'default' | 'success' | 'warning' | 'danger'
+    size?: 'xs' | 'sm' | 'md'
+    glow?: boolean
+    levels?: boolean | [number, number]
+    marker?: number
     label?: string
   }>(),
-  { max: 100, variant: 'default' },
+  { max: 100, variant: 'default', size: 'md', levels: false },
 )
-const percent = computed(() => Math.min(100, Math.max(0, Math.round((props.value / props.max) * 100))))
+const pct = (v: number) => (props.max > 0 ? Math.min(100, Math.max(0, (v / props.max) * 100)) : 0)
+const percent = computed(() => Math.round(pct(props.value)))
+const tone = computed(() => {
+  if (props.variant !== 'default' || !props.levels) return props.variant
+  const [warn, danger] = props.levels === true ? [70, 90] : props.levels
+  return percent.value >= danger ? 'danger' : percent.value >= warn ? 'warning' : 'default'
+})
 </script>
 
 <template>
-  <div class="oc-progress" role="progressbar" :aria-valuenow="value" aria-valuemin="0" :aria-valuemax="max" :aria-label="label">
-    <div :class="['oc-progress-bar', variant !== 'default' && `oc-progress-bar--${variant}`]" :style="{ width: `${percent}%` }"></div>
+  <div
+    :class="['oc-progress', size !== 'md' && `oc-progress--${size}`, glow && 'oc-progress--glow']"
+    role="progressbar"
+    :aria-valuenow="value"
+    aria-valuemin="0"
+    :aria-valuemax="max"
+    :aria-label="label"
+  >
+    <div :class="['oc-progress-bar', tone !== 'default' && `oc-progress-bar--${tone}`]" :style="{ width: `${percent}%` }"></div>
+    <span v-if="marker != null" class="oc-progress-marker" :style="{ left: `${pct(marker)}%` }"></span>
   </div>
 </template>

package/src/components/OcProse.vue

@@ -2,10 +2,10 @@
 <script setup lang="ts">
 /**
  * Typography for long-form text written without classes (same markup as snippets/prose.html). Slot default = the text
- * (put .oc-prose-lead on the intro paragraph); the snippet's demo article when empty. size: sm | md | lg, full = no max width.
- * Classes: .oc-prose(--sm/--lg/--full), .oc-prose-lead
+ * (put .oc-prose-lead on the intro paragraph); the snippet's demo article when empty. size: compact (widgets, 13 px) | sm | md | lg, full = no max width.
+ * Classes: .oc-prose(--compact/--sm/--lg/--full), .oc-prose-lead
  */
-withDefaults(defineProps<{ size?: 'sm' | 'md' | 'lg'; full?: boolean; as?: 'article' | 'div' | 'section' }>(), { size: 'md', as: 'article' })
+withDefaults(defineProps<{ size?: 'compact' | 'sm' | 'md' | 'lg'; full?: boolean; as?: 'article' | 'div' | 'section' }>(), { size: 'md', as: 'article' })
 </script>
 
 <template>

package/src/components/OcStatus.vue

@@ -0,0 +1,16 @@
+<!-- File: packages/vue/src/components/OcStatus.vue | Map: props (tone, meta) -> p.oc-status -> OcStatusDot + __text (slot) + __meta -->
+<script setup lang="ts">
+/** Status row: dot + one line of state text (slot, cuts off with …) + optional meta on the right.
+ *  Classes: .oc-status, .oc-status__text, .oc-status__meta */
+import OcStatusDot from './OcStatusDot.vue'
+
+withDefaults(defineProps<{ tone?: 'default' | 'working' | 'waiting' | 'done' | 'error' | 'idle'; meta?: string }>(), { tone: 'default' })
+</script>
+
+<template>
+  <p class="oc-status">
+    <OcStatusDot :tone="tone" />
+    <span class="oc-status__text"><slot /></span>
+    <span v-if="meta || $slots.meta" class="oc-status__meta"><slot name="meta">{{ meta }}</slot></span>
+  </p>
+</template>

package/src/components/OcStatusDot.vue

@@ -0,0 +1,18 @@
+<!-- File: packages/vue/src/components/OcStatusDot.vue | Map: props (tone, size, label) -> span.oc-status-dot (role="img" with a label, else aria-hidden) -->
+<script setup lang="ts">
+/** A live state light; --working pulses. With `label` the dot stands alone (role="img"), without it is decoration.
+ *  Classes: .oc-status-dot + --working/--waiting/--done/--error/--idle, --sm/--lg */
+withDefaults(
+  defineProps<{ tone?: 'default' | 'working' | 'waiting' | 'done' | 'error' | 'idle'; size?: 'sm' | 'md' | 'lg'; label?: string }>(),
+  { tone: 'default', size: 'md' },
+)
+</script>
+
+<template>
+  <span
+    :class="['oc-status-dot', tone !== 'default' && `oc-status-dot--${tone}`, size !== 'md' && `oc-status-dot--${size}`]"
+    :role="label ? 'img' : undefined"
+    :aria-label="label"
+    :aria-hidden="label ? undefined : 'true'"
+  ></span>
+</template>

package/src/components/OcTitlebar.vue

@@ -0,0 +1,18 @@
+<!-- File: packages/vue/src/components/OcTitlebar.vue | Map: props (title, subtitle, bordered, size) -> header.oc-titlebar -> __main (icon slot, title, subtitle) -> __actions (default slot) -->
+<script setup lang="ts">
+/** Drag area of a frameless desktop window (app-region: drag); buttons in it stay clickable.
+ *  Slots: icon, title, subtitle, default (the OcTitlebarButton actions).
+ *  Classes: .oc-titlebar(--bordered/--sm), __main, __icon, __title, __subtitle, __actions */
+withDefaults(defineProps<{ title?: string; subtitle?: string; bordered?: boolean; size?: 'sm' | 'md' }>(), { size: 'md' })
+</script>
+
+<template>
+  <header :class="['oc-titlebar', bordered && 'oc-titlebar--bordered', size === 'sm' && 'oc-titlebar--sm']">
+    <div class="oc-titlebar__main">
+      <span v-if="$slots.icon" class="oc-titlebar__icon" aria-hidden="true"><slot name="icon" /></span>
+      <span v-if="title || $slots.title" class="oc-titlebar__title"><slot name="title">{{ title }}</slot></span>
+      <span v-if="subtitle || $slots.subtitle" class="oc-titlebar__subtitle"><slot name="subtitle">{{ subtitle }}</slot></span>
+    </div>
+    <div v-if="$slots.default" class="oc-titlebar__actions"><slot /></div>
+  </header>
+</template>

package/src/components/OcTitlebarBody.vue

@@ -0,0 +1,8 @@
+<!-- File: packages/vue/src/components/OcTitlebarBody.vue | Map: div.oc-titlebar-body -> slot -->
+<script setup lang="ts">
+/** The part of the window that scrolls; the title bar gets its hairline once it does. Class: .oc-titlebar-body */
+</script>
+
+<template>
+  <div class="oc-titlebar-body"><slot /></div>
+</template>

package/src/components/OcTitlebarButton.vue

@@ -0,0 +1,10 @@
+<!-- File: packages/vue/src/components/OcTitlebarButton.vue | Map: props (label, close) -> button.oc-titlebar__btn -> slot (icon) -->
+<script setup lang="ts">
+/** Compact icon button in the title bar; `label` names it for screen readers, `close` turns it red on hover.
+ *  Classes: .oc-titlebar__btn(--close) */
+defineProps<{ label: string; close?: boolean }>()
+</script>
+
+<template>
+  <button type="button" :class="['oc-titlebar__btn', close && 'oc-titlebar__btn--close']" :aria-label="label" :title="label"><slot /></button>
+</template>

package/src/components/OcTitlebarWindow.vue

@@ -0,0 +1,8 @@
+<!-- File: packages/vue/src/components/OcTitlebarWindow.vue | Map: div.oc-titlebar-window -> slot (OcTitlebar + OcTitlebarBody) -->
+<script setup lang="ts">
+/** Column around the title bar and the body, so the bar sees the body scroll. Class: .oc-titlebar-window */
+</script>
+
+<template>
+  <div class="oc-titlebar-window"><slot /></div>
+</template>

package/src/index.ts

@@ -55,6 +55,8 @@ import OcFactList from './components/OcFactList.vue'
 import OcFilterCounts from './components/OcFilterCounts.vue'
 import OcFlipCard from './components/OcFlipCard.vue'
 import OcFormField from './components/OcFormField.vue'
+import OcGlass from './components/OcGlass.vue'
+import OcGlassPanel from './components/OcGlassPanel.vue'
 import OcGreeting from './components/OcGreeting.vue'
 import OcHeading from './components/OcHeading.vue'
 import OcHoverCard from './components/OcHoverCard.vue'
@@ -120,6 +122,8 @@ import OcSpinner from './components/OcSpinner.vue'
 import OcStackCard from './components/OcStackCard.vue'
 import OcStackList from './components/OcStackList.vue'
 import OcStatCard from './components/OcStatCard.vue'
+import OcStatus from './components/OcStatus.vue'
+import OcStatusDot from './components/OcStatusDot.vue'
 import OcStepper from './components/OcStepper.vue'
 import OcSwitch from './components/OcSwitch.vue'
 import OcTable from './components/OcTable.vue'
@@ -132,6 +136,10 @@ import OcTextarea from './components/OcTextarea.vue'
 import OcThemeSwitch from './components/OcThemeSwitch.vue'
 import OcTimeInput from './components/OcTimeInput.vue'
 import OcTimeline from './components/OcTimeline.vue'
+import OcTitlebar from './components/OcTitlebar.vue'
+import OcTitlebarBody from './components/OcTitlebarBody.vue'
+import OcTitlebarButton from './components/OcTitlebarButton.vue'
+import OcTitlebarWindow from './components/OcTitlebarWindow.vue'
 import OcToast from './components/OcToast.vue'
 import OcToastContainer from './components/OcToastContainer.vue'
 import OcToggle from './components/OcToggle.vue'
@@ -232,6 +240,8 @@ export {
   OcFilterCounts,
   OcFlipCard,
   OcFormField,
+  OcGlass,
+  OcGlassPanel,
   OcGreeting,
   OcHeading,
   OcHoverCard,
@@ -297,6 +307,8 @@ export {
   OcStackCard,
   OcStackList,
   OcStatCard,
+  OcStatus,
+  OcStatusDot,
   OcStepper,
   OcSwitch,
   OcTable,
@@ -309,6 +321,10 @@ export {
   OcThemeSwitch,
   OcTimeInput,
   OcTimeline,
+  OcTitlebar,
+  OcTitlebarBody,
+  OcTitlebarButton,
+  OcTitlebarWindow,
   OcToast,
   OcToastContainer,
   OcToggle,
@@ -465,6 +481,8 @@ export const components: Record<string, Component> = {
   OcFilterCounts,
   OcFlipCard,
   OcFormField,
+  OcGlass,
+  OcGlassPanel,
   OcGreeting,
   OcHeading,
   OcHoverCard,
@@ -530,6 +548,8 @@ export const components: Record<string, Component> = {
   OcStackCard,
   OcStackList,
   OcStatCard,
+  OcStatus,
+  OcStatusDot,
   OcStepper,
   OcSwitch,
   OcTable,
@@ -542,6 +562,10 @@ export const components: Record<string, Component> = {
   OcThemeSwitch,
   OcTimeInput,
   OcTimeline,
+  OcTitlebar,
+  OcTitlebarBody,
+  OcTitlebarButton,
+  OcTitlebarWindow,
   OcToast,
   OcToastContainer,
   OcToggle,