@birdycom/omniaui-vue 0.12.0 → 0.12.2

package/manifest.json

@@ -420,12 +420,24 @@
       "file": "src/components/OcLinkArrow.vue",
       "snippet": "@birdycom/omniaui/snippets/link-arrow.html"
     },
+    {
+      "name": "OcLinkRow",
+      "kind": "component",
+      "file": "src/components/OcLinkRow.vue",
+      "snippet": "@birdycom/omniaui/snippets/link-row.html"
+    },
     {
       "name": "OcListToolbar",
       "kind": "component",
       "file": "src/components/OcListToolbar.vue",
       "snippet": "@birdycom/omniaui/snippets/list-toolbar.html"
     },
+    {
+      "name": "OcLiveFrame",
+      "kind": "component",
+      "file": "src/components/OcLiveFrame.vue",
+      "snippet": "@birdycom/omniaui/snippets/live-frame.html"
+    },
     {
       "name": "OcMarquee",
       "kind": "component",
@@ -840,6 +852,12 @@
       "file": "src/components/OcVersionBanner.vue",
       "snippet": "@birdycom/omniaui/snippets/version-banner.html"
     },
+    {
+      "name": "OcWatermark",
+      "kind": "component",
+      "file": "src/components/OcWatermark.vue",
+      "snippet": "@birdycom/omniaui/snippets/watermark.html"
+    },
     {
       "name": "OcBlockAboutTimeline",
       "kind": "block",

package/package.json

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

@@ -0,0 +1,19 @@
+<!-- File: packages/vue/src/components/OcLinkRow.vue | Map: props (links, tone, size) -> ul.oc-link-row -> li > a per link, or the slot -->
+<script setup lang="ts">
+/** A row of links under a card; external links get an arrow, github.com links the GitHub mark (CSS, by the href).
+ *  Classes: .oc-link-row + --accent/--muted, --sm/--lg */
+withDefaults(
+  defineProps<{ links?: { href: string; label: string }[]; tone?: 'default' | 'accent' | 'muted'; size?: 'sm' | 'default' | 'lg' }>(),
+  { tone: 'default', size: 'default' },
+)
+const external = (href: string) => /^https?:\/\//.test(href)
+</script>
+
+<template>
+  <ul :class="['oc-link-row', tone !== 'default' && `oc-link-row--${tone}`, size !== 'default' && `oc-link-row--${size}`]">
+    <template v-if="links">
+      <li v-for="(l, i) in links" :key="i"><a :href="l.href" :rel="external(l.href) ? 'noopener' : undefined">{{ l.label }}</a></li>
+    </template>
+    <slot v-else />
+  </ul>
+</template>

package/src/components/OcLiveFrame.vue

@@ -0,0 +1,21 @@
+<!-- File: packages/vue/src/components/OcLiveFrame.vue | Map: props (src, title, width, height, static) -> div.oc-live-frame -> iframe or slot -->
+<script setup lang="ts">
+/**
+ * A live page at a virtual size (default 1280x720), scaled down to the frame width in pure CSS. Without src the slot
+ * goes in (an <img>, <video> or .oc-live-frame__content). Classes: .oc-live-frame, --static, .oc-browser-frame__view
+ */
+withDefaults(
+  defineProps<{ src?: string; title?: string; width?: number; height?: number; static?: boolean; inBrowserFrame?: boolean }>(),
+  { title: '', width: 1280, height: 720, static: false, inBrowserFrame: false },
+)
+</script>
+
+<template>
+  <div
+    :class="[inBrowserFrame && 'oc-browser-frame__view', 'oc-live-frame', static && 'oc-live-frame--static']"
+    :style="{ '--oc-live-w': width, '--oc-live-h': height }"
+  >
+    <iframe v-if="src" :src="src" :title="title" loading="lazy" scrolling="no" :tabindex="static ? -1 : undefined" />
+    <slot v-else />
+  </div>
+</template>

package/src/components/OcWatermark.vue

@@ -0,0 +1,29 @@
+<!-- File: packages/vue/src/components/OcWatermark.vue | Map: props (text, variant, tone, repeat) -> span.oc-watermark (text once or tiled) -->
+<script setup lang="ts">
+/**
+ * Light text over its positioned parent (put it last inside an element with class="relative"). Click-through and
+ * aria-hidden. A logo or icon goes in the "mark" slot (<img> or <svg>) instead of text. Classes: .oc-watermark + --straight/--tile/--corner/--corner-top, --light/--primary/--destructive
+ */
+withDefaults(
+  defineProps<{
+    text?: string
+    variant?: 'diagonal' | 'straight' | 'tile' | 'corner' | 'corner-top'
+    tone?: 'default' | 'light' | 'primary' | 'destructive'
+    repeat?: number
+    mono?: boolean
+  }>(),
+  { text: 'Concept', variant: 'diagonal', tone: 'default', repeat: 12, mono: false },
+)
+</script>
+
+<template>
+  <span
+    :class="['oc-watermark', variant !== 'diagonal' && `oc-watermark--${variant}`, tone !== 'default' && `oc-watermark--${tone}`, mono && 'oc-watermark--mono']"
+    aria-hidden="true"
+  >
+    <template v-for="i in (variant === 'tile' ? Math.max(1, repeat) : 1)" :key="i">
+      <slot v-if="$slots.mark" name="mark" />
+      <span v-else><slot>{{ text }}</slot></span>
+    </template>
+  </span>
+</template>

package/src/index.ts

@@ -71,7 +71,9 @@ import OcLanguageSelect from './components/OcLanguageSelect.vue'
 import OcLauncherCard from './components/OcLauncherCard.vue'
 import OcLightbox from './components/OcLightbox.vue'
 import OcLinkArrow from './components/OcLinkArrow.vue'
+import OcLinkRow from './components/OcLinkRow.vue'
 import OcListToolbar from './components/OcListToolbar.vue'
+import OcLiveFrame from './components/OcLiveFrame.vue'
 import OcMarquee from './components/OcMarquee.vue'
 import OcMediaCard from './components/OcMediaCard.vue'
 import OcMediaRow from './components/OcMediaRow.vue'
@@ -141,6 +143,7 @@ import OcTree from './components/OcTree.vue'
 import OcUpgradeBanner from './components/OcUpgradeBanner.vue'
 import OcUser from './components/OcUser.vue'
 import OcVersionBanner from './components/OcVersionBanner.vue'
+import OcWatermark from './components/OcWatermark.vue'
 import OcBlockAboutTimeline from './blocks/OcBlockAboutTimeline.vue'
 import OcBlockAppHeader from './blocks/OcBlockAppHeader.vue'
 import OcBlockAppShell from './blocks/OcBlockAppShell.vue'
@@ -245,7 +248,9 @@ export {
   OcLauncherCard,
   OcLightbox,
   OcLinkArrow,
+  OcLinkRow,
   OcListToolbar,
+  OcLiveFrame,
   OcMarquee,
   OcMediaCard,
   OcMediaRow,
@@ -315,6 +320,7 @@ export {
   OcUpgradeBanner,
   OcUser,
   OcVersionBanner,
+  OcWatermark,
   OcBlockAboutTimeline,
   OcBlockAppHeader,
   OcBlockAppShell,
@@ -475,7 +481,9 @@ export const components: Record<string, Component> = {
   OcLauncherCard,
   OcLightbox,
   OcLinkArrow,
+  OcLinkRow,
   OcListToolbar,
+  OcLiveFrame,
   OcMarquee,
   OcMediaCard,
   OcMediaRow,
@@ -545,6 +553,7 @@ export const components: Record<string, Component> = {
   OcUpgradeBanner,
   OcUser,
   OcVersionBanner,
+  OcWatermark,
   OcBlockAboutTimeline,
   OcBlockAppHeader,
   OcBlockAppShell,