@birdycom/omniaui-vue 0.12.6 → 0.13.0

package/manifest.json

@@ -114,6 +114,12 @@
       "file": "src/components/OcBarcodeInput.vue",
       "snippet": "@birdycom/omniaui/snippets/barcode-input.html"
     },
+    {
+      "name": "OcBrandMark",
+      "kind": "component",
+      "file": "src/components/OcBrandMark.vue",
+      "snippet": "@birdycom/omniaui/snippets/brand-mark.html"
+    },
     {
       "name": "OcBreadcrumb",
       "kind": "component",
@@ -324,6 +330,12 @@
       "file": "src/components/OcFactList.vue",
       "snippet": "@birdycom/omniaui/snippets/fact-list.html"
     },
+    {
+      "name": "OcFeatureCard",
+      "kind": "component",
+      "file": "src/components/OcFeatureCard.vue",
+      "snippet": "@birdycom/omniaui/snippets/feature-card.html"
+    },
     {
       "name": "OcFilterCounts",
       "kind": "component",
@@ -474,6 +486,12 @@
       "file": "src/components/OcLinkArrow.vue",
       "snippet": "@birdycom/omniaui/snippets/link-arrow.html"
     },
+    {
+      "name": "OcLinkCard",
+      "kind": "component",
+      "file": "src/components/OcLinkCard.vue",
+      "snippet": null
+    },
     {
       "name": "OcLinkRow",
       "kind": "component",
@@ -594,6 +612,12 @@
       "file": "src/components/OcPagination.vue",
       "snippet": "@birdycom/omniaui/snippets/pagination.html"
     },
+    {
+      "name": "OcPanel",
+      "kind": "component",
+      "file": "src/components/OcPanel.vue",
+      "snippet": "@birdycom/omniaui/snippets/panel.html"
+    },
     {
       "name": "OcPasswordInput",
       "kind": "component",
@@ -690,6 +714,12 @@
       "file": "src/components/OcRecoveryCodes.vue",
       "snippet": "@birdycom/omniaui/snippets/recovery-codes.html"
     },
+    {
+      "name": "OcResult",
+      "kind": "component",
+      "file": "src/components/OcResult.vue",
+      "snippet": "@birdycom/omniaui/snippets/result.html"
+    },
     {
       "name": "OcRibbon",
       "kind": "component",
@@ -1032,6 +1062,12 @@
       "file": "src/blocks/OcBlockAuthSplit.vue",
       "snippet": "@birdycom/omniaui-blocks/blocks/auth-split.html"
     },
+    {
+      "name": "OcBlockContactForm",
+      "kind": "block",
+      "file": "src/blocks/OcBlockContactForm.vue",
+      "snippet": "@birdycom/omniaui-blocks/blocks/contact-form.html"
+    },
     {
       "name": "OcBlockContactGrid",
       "kind": "block",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui-vue",
-  "version": "0.12.6",
+  "version": "0.13.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/blocks/OcBlockContactForm.vue

@@ -0,0 +1,146 @@
+<!-- File: packages/vue/src/blocks/OcBlockContactForm.vue | Map: props -> panel (result | title, intro, alert, form: honeypot, fields, actions) -> cards -->
+<script setup lang="ts">
+/**
+ * Contact form in a panel next to a column of contact cards. Server errors come in as `errors` (field name -> text,
+ * `form` = message above the form); `sent` shows the result, `busy` sets aria-busy and disables the button.
+ * Slots: fields (own fields instead of name, e-mail, phone, subject, message), note, success, card-icon ({ card }).
+ * Emits submit (the native event; call preventDefault for Inertia) and again (back to the form).
+ * Classes: .oc-block-contact-form, -layout, -title, -intro, -cards; .oc-panel--glow, .oc-form--filled, .oc-result
+ */
+import { computed } from 'vue'
+import { useUid } from '../composables/useUid'
+
+export interface ContactFormLine {
+  text: string
+  href?: string
+}
+export interface ContactFormCard {
+  title: string
+  lines: ContactFormLine[]
+  /** Webicon name (mdi:email-outline …), drawn with <iconify-icon>. */
+  icon?: string
+}
+export interface ContactFormSubject {
+  value: string
+  label: string
+}
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    intro?: string
+    action?: string
+    method?: string
+    subjects?: ContactFormSubject[]
+    values?: Record<string, string>
+    errors?: Record<string, string>
+    sent?: boolean
+    busy?: boolean
+    submitLabel?: string
+    busyLabel?: string
+    note?: string
+    successTitle?: string
+    successText?: string
+    againLabel?: string
+    errorText?: string
+    cards?: ContactFormCard[]
+  }>(),
+  {
+    title: 'Send us a message',
+    method: 'post',
+    subjects: () => [],
+    values: () => ({}),
+    errors: () => ({}),
+    submitLabel: 'Send message',
+    busyLabel: 'Sending…',
+    successTitle: 'Thank you, your message was sent',
+    againLabel: 'Send another message',
+    errorText: 'Please check the fields in red.',
+    cards: () => [],
+  },
+)
+const emit = defineEmits<{ submit: [event: Event]; again: [] }>()
+const uid = useUid('oc-contact')
+const fid = (name: string) => `${uid}-${name}`
+const invalid = (name: string) => (props.errors[name] ? { 'aria-invalid': true as const, 'aria-describedby': `err-${name}` } : {})
+const alertText = computed(() => props.errors.form ?? (Object.keys(props.errors).some((k) => k !== 'form') ? props.errorText : null))
+</script>
+
+<template>
+  <section class="oc-block-contact-form" aria-label="Contact">
+    <div class="oc-block-contact-form-layout">
+      <div :id="uid" class="oc-panel oc-panel--glow">
+        <div v-if="sent" class="oc-result" role="status" tabindex="-1">
+          <slot name="success">
+            <span class="oc-icon-tile oc-icon-tile--sm oc-accent--green" aria-hidden="true"><iconify-icon icon="mdi:check" /></span>
+            <h2 class="oc-result__title">{{ successTitle }}</h2>
+            <p v-if="successText" class="oc-result__text">{{ successText }}</p>
+            <div class="oc-result__actions">
+              <button type="button" class="oc-btn oc-btn--outline" @click="emit('again')">{{ againLabel }}</button>
+            </div>
+          </slot>
+        </div>
+        <div v-else>
+          <h2 v-if="title" class="oc-block-contact-form-title">{{ title }}</h2>
+          <p v-if="intro" class="oc-block-contact-form-intro">{{ intro }}</p>
+          <p v-if="alertText" class="oc-alert oc-alert--danger" role="alert">{{ alertText }}</p>
+          <form class="oc-form oc-form--filled" :action="action" :method="method" novalidate :aria-busy="busy || undefined" @submit="emit('submit', $event)">
+            <div class="oc-honeypot" aria-hidden="true">
+              <label :for="fid('website')">Leave this field empty</label>
+              <input :id="fid('website')" type="text" name="website" tabindex="-1" autocomplete="off" />
+            </div>
+            <slot name="fields">
+              <div class="oc-field-group oc-field-group--row">
+                <div class="oc-field">
+                  <label class="oc-field-label" :for="fid('name')">Name</label>
+                  <input :id="fid('name')" class="oc-input" type="text" name="name" required maxlength="100" autocomplete="name" :value="values.name" v-bind="invalid('name')" />
+                  <p v-if="errors.name" id="err-name" class="oc-field-error">{{ errors.name }}</p>
+                </div>
+                <div class="oc-field">
+                  <label class="oc-field-label" :for="fid('email')">E-mail</label>
+                  <input :id="fid('email')" class="oc-input" type="email" name="email" required maxlength="254" autocomplete="email" :value="values.email" v-bind="invalid('email')" />
+                  <p v-if="errors.email" id="err-email" class="oc-field-error">{{ errors.email }}</p>
+                </div>
+              </div>
+              <div :class="['oc-field-group', subjects.length && 'oc-field-group--row']">
+                <div class="oc-field">
+                  <label class="oc-field-label" :for="fid('phone')">Phone <span class="oc-field-label__hint">(optional)</span></label>
+                  <input :id="fid('phone')" class="oc-input" type="tel" name="phone" maxlength="40" autocomplete="tel" inputmode="tel" :value="values.phone" v-bind="invalid('phone')" />
+                  <p v-if="errors.phone" id="err-phone" class="oc-field-error">{{ errors.phone }}</p>
+                </div>
+                <div v-if="subjects.length" class="oc-field">
+                  <label class="oc-field-label" :for="fid('subject')">What is it about?</label>
+                  <select :id="fid('subject')" class="oc-select" name="subject" required v-bind="invalid('subject')">
+                    <option value="" :selected="!values.subject">Choose a subject</option>
+                    <option v-for="s in subjects" :key="s.value" :value="s.value" :selected="values.subject === s.value">{{ s.label }}</option>
+                  </select>
+                  <p v-if="errors.subject" id="err-subject" class="oc-field-error">{{ errors.subject }}</p>
+                </div>
+              </div>
+              <div class="oc-field">
+                <label class="oc-field-label" :for="fid('message')">Your message</label>
+                <textarea :id="fid('message')" class="oc-input oc-textarea" name="message" rows="6" required maxlength="5000" :value="values.message" v-bind="invalid('message')" />
+                <p v-if="errors.message" id="err-message" class="oc-field-error">{{ errors.message }}</p>
+              </div>
+            </slot>
+            <div class="oc-form-actions">
+              <button class="oc-btn oc-btn--lg" type="submit" :disabled="busy">{{ busy ? busyLabel : submitLabel }}</button>
+              <p v-if="note || $slots.note" class="oc-form-note"><slot name="note">{{ note }}</slot></p>
+            </div>
+          </form>
+        </div>
+      </div>
+      <div v-if="cards.length" class="oc-block-contact-form-cards">
+        <article v-for="(card, i) in cards" :key="i" class="oc-block-contact-card">
+          <span v-if="card.icon || $slots['card-icon']" class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">
+            <slot name="card-icon" :card="card"><iconify-icon :icon="card.icon" /></slot>
+          </span>
+          <h3 class="oc-block-contact-title">{{ card.title }}</h3>
+          <template v-for="(line, j) in card.lines" :key="j">
+            <a v-if="line.href" class="oc-block-contact-line" :href="line.href">{{ line.text }}</a>
+            <p v-else class="oc-block-contact-line">{{ line.text }}</p>
+          </template>
+        </article>
+      </div>
+    </div>
+  </section>
+</template>

package/src/components/OcBrandMark.vue

@@ -0,0 +1,15 @@
+<!-- File: packages/vue/src/components/OcBrandMark.vue | Map: link -> icon (slot) -> word (name + accent) -> tagline -->
+<script setup lang="ts">
+/** Logo from an icon and text (snippets/brand-mark.html). Slot icon: an <svg class="oc-brand-mark__icon"> or <img>. */
+withDefaults(defineProps<{ name: string; accent?: string; tagline?: string; href?: string; size?: 'sm' | 'md' | 'lg' }>(), { href: '/', size: 'md' })
+</script>
+
+<template>
+  <a :class="['oc-brand-mark', size !== 'md' && `oc-brand-mark--${size}`]" :href="href">
+    <slot name="icon" />
+    <span class="oc-brand-mark__text">
+      <span class="oc-brand-mark__word">{{ name }}<span v-if="accent" class="oc-brand-mark__accent">{{ accent }}</span></span>
+      <span v-if="tagline" class="oc-brand-mark__tagline">{{ tagline }}</span>
+    </span>
+  </a>
+</template>

package/src/components/OcFeatureCard.vue

@@ -0,0 +1,15 @@
+<!-- File: packages/vue/src/components/OcFeatureCard.vue | Map: tile (icon) -> title -> text (slot) -->
+<script setup lang="ts">
+/** Service or feature card (snippets/feature-card.html). icon = webicon name; slots: default (text), icon. */
+withDefaults(defineProps<{ title: string; icon?: string; accent?: string; headingLevel?: 2 | 3 | 4 }>(), { headingLevel: 3 })
+</script>
+
+<template>
+  <article class="oc-feature-card">
+    <span v-if="icon || $slots.icon" :class="['oc-icon-tile oc-icon-tile--sm', accent && `oc-accent--${accent}`]" aria-hidden="true">
+      <slot name="icon"><iconify-icon :icon="icon" /></slot>
+    </span>
+    <component :is="`h${headingLevel}`" class="oc-feature-card__title">{{ title }}</component>
+    <p v-if="$slots.default" class="oc-feature-card__text"><slot /></p>
+  </article>
+</template>

package/src/components/OcLinkCard.vue

@@ -0,0 +1,16 @@
+<!-- File: packages/vue/src/components/OcLinkCard.vue | Map: link -> tile (icon) -> title -> text (slot) -> more -->
+<script setup lang="ts">
+/** A card that is a whole link (snippets/feature-card.html). icon = webicon name; slots: default (text), icon. */
+defineProps<{ title: string; href: string; icon?: string; accent?: string; more?: string }>()
+</script>
+
+<template>
+  <a :class="['oc-link-card', accent && `oc-accent--${accent}`]" :href="href">
+    <span v-if="icon || $slots.icon" class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">
+      <slot name="icon"><iconify-icon :icon="icon" /></slot>
+    </span>
+    <span class="oc-link-card__title">{{ title }}</span>
+    <span v-if="$slots.default" class="oc-link-card__text"><slot /></span>
+    <span v-if="more" class="oc-link-card__more">{{ more }}</span>
+  </a>
+</template>

package/src/components/OcPanel.vue

@@ -0,0 +1,9 @@
+<!-- File: packages/vue/src/components/OcPanel.vue | Map: glow -> classes -> panel with the slot -->
+<script setup lang="ts">
+/** Framed panel for a form, a call to action or a feature (same markup as snippets/panel.html). glow: start | end | both. */
+defineProps<{ glow?: 'start' | 'end' | 'both' }>()
+</script>
+
+<template>
+  <div :class="['oc-panel', (glow === 'start' || glow === 'end') && 'oc-panel--glow', glow === 'end' && 'oc-panel--glow-end', glow === 'both' && 'oc-panel--glow-both']"><slot /></div>
+</template>

package/src/components/OcResult.vue

@@ -0,0 +1,16 @@
+<!-- File: packages/vue/src/components/OcResult.vue | Map: tile (icon) -> title -> text (slot) -> actions (slot) -->
+<script setup lang="ts">
+/** Outcome of an action in place of the form (snippets/result.html). icon = webicon name; slots: default (text), icon, actions. */
+defineProps<{ title: string; icon?: string; accent?: string; center?: boolean }>()
+</script>
+
+<template>
+  <div :class="['oc-result', center && 'oc-result--center']" role="status" tabindex="-1">
+    <span v-if="icon || $slots.icon" :class="['oc-icon-tile oc-icon-tile--sm', accent && `oc-accent--${accent}`]" aria-hidden="true">
+      <slot name="icon"><iconify-icon :icon="icon" /></slot>
+    </span>
+    <h2 class="oc-result__title">{{ title }}</h2>
+    <p v-if="$slots.default" class="oc-result__text"><slot /></p>
+    <div v-if="$slots.actions" class="oc-result__actions"><slot name="actions" /></div>
+  </div>
+</template>

package/src/index.ts

@@ -20,6 +20,7 @@ import OcBackLink from './components/OcBackLink.vue'
 import OcBadge from './components/OcBadge.vue'
 import OcBarcode from './components/OcBarcode.vue'
 import OcBarcodeInput from './components/OcBarcodeInput.vue'
+import OcBrandMark from './components/OcBrandMark.vue'
 import OcBreadcrumb from './components/OcBreadcrumb.vue'
 import OcBrowserFrame from './components/OcBrowserFrame.vue'
 import OcBusyOverlay from './components/OcBusyOverlay.vue'
@@ -55,6 +56,7 @@ import OcEmojiPicker from './components/OcEmojiPicker.vue'
 import OcEmptyState from './components/OcEmptyState.vue'
 import OcEntityCard from './components/OcEntityCard.vue'
 import OcFactList from './components/OcFactList.vue'
+import OcFeatureCard from './components/OcFeatureCard.vue'
 import OcFilterCounts from './components/OcFilterCounts.vue'
 import OcFlipCard from './components/OcFlipCard.vue'
 import OcFormField from './components/OcFormField.vue'
@@ -80,6 +82,7 @@ import OcLauncherCard from './components/OcLauncherCard.vue'
 import OcLazyImage from './components/OcLazyImage.vue'
 import OcLightbox from './components/OcLightbox.vue'
 import OcLinkArrow from './components/OcLinkArrow.vue'
+import OcLinkCard from './components/OcLinkCard.vue'
 import OcLinkRow from './components/OcLinkRow.vue'
 import OcListToolbar from './components/OcListToolbar.vue'
 import OcLiveFrame from './components/OcLiveFrame.vue'
@@ -100,6 +103,7 @@ import OcNumberInput from './components/OcNumberInput.vue'
 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 OcPasswordInput from './components/OcPasswordInput.vue'
 import OcPasswordRequirements from './components/OcPasswordRequirements.vue'
 import OcPhoneInput from './components/OcPhoneInput.vue'
@@ -116,6 +120,7 @@ import OcRadioGroup from './components/OcRadioGroup.vue'
 import OcRating from './components/OcRating.vue'
 import OcRatingInput from './components/OcRatingInput.vue'
 import OcRecoveryCodes from './components/OcRecoveryCodes.vue'
+import OcResult from './components/OcResult.vue'
 import OcRibbon from './components/OcRibbon.vue'
 import OcScrollArea from './components/OcScrollArea.vue'
 import OcSegmented from './components/OcSegmented.vue'
@@ -173,6 +178,7 @@ import OcBlockAppHeader from './blocks/OcBlockAppHeader.vue'
 import OcBlockAppShell from './blocks/OcBlockAppShell.vue'
 import OcBlockAuth from './blocks/OcBlockAuth.vue'
 import OcBlockAuthSplit from './blocks/OcBlockAuthSplit.vue'
+import OcBlockContactForm from './blocks/OcBlockContactForm.vue'
 import OcBlockContactGrid from './blocks/OcBlockContactGrid.vue'
 import OcBlockCta from './blocks/OcBlockCta.vue'
 import OcBlockDataTable from './blocks/OcBlockDataTable.vue'
@@ -221,6 +227,7 @@ export {
   OcBadge,
   OcBarcode,
   OcBarcodeInput,
+  OcBrandMark,
   OcBreadcrumb,
   OcBrowserFrame,
   OcBusyOverlay,
@@ -256,6 +263,7 @@ export {
   OcEmptyState,
   OcEntityCard,
   OcFactList,
+  OcFeatureCard,
   OcFilterCounts,
   OcFlipCard,
   OcFormField,
@@ -281,6 +289,7 @@ export {
   OcLazyImage,
   OcLightbox,
   OcLinkArrow,
+  OcLinkCard,
   OcLinkRow,
   OcListToolbar,
   OcLiveFrame,
@@ -301,6 +310,7 @@ export {
   OcOtpInput,
   OcPageHeader,
   OcPagination,
+  OcPanel,
   OcPasswordInput,
   OcPasswordRequirements,
   OcPhoneInput,
@@ -317,6 +327,7 @@ export {
   OcRating,
   OcRatingInput,
   OcRecoveryCodes,
+  OcResult,
   OcRibbon,
   OcScrollArea,
   OcSegmented,
@@ -374,6 +385,7 @@ export {
   OcBlockAppShell,
   OcBlockAuth,
   OcBlockAuthSplit,
+  OcBlockContactForm,
   OcBlockContactGrid,
   OcBlockCta,
   OcBlockDataTable,
@@ -438,6 +450,7 @@ export type { TableCompactColumn } from './components/OcTableCompact.vue'
 export type { TabItem } from './components/OcTabs.vue'
 export type { TimelineEntry } from './components/OcTimeline.vue'
 export type { OcTreeItem } from './components/OcTree.vue'
+export type { ContactFormLine, ContactFormCard, ContactFormSubject } from './blocks/OcBlockContactForm.vue'
 export type { ContactGridLine, ContactGridCard } from './blocks/OcBlockContactGrid.vue'
 export type { FaqItem } from './blocks/OcBlockFaq.vue'
 export type { FeatureItem } from './blocks/OcBlockFeatures.vue'
@@ -481,6 +494,7 @@ export const components: Record<string, Component> = {
   OcBadge,
   OcBarcode,
   OcBarcodeInput,
+  OcBrandMark,
   OcBreadcrumb,
   OcBrowserFrame,
   OcBusyOverlay,
@@ -516,6 +530,7 @@ export const components: Record<string, Component> = {
   OcEmptyState,
   OcEntityCard,
   OcFactList,
+  OcFeatureCard,
   OcFilterCounts,
   OcFlipCard,
   OcFormField,
@@ -541,6 +556,7 @@ export const components: Record<string, Component> = {
   OcLazyImage,
   OcLightbox,
   OcLinkArrow,
+  OcLinkCard,
   OcLinkRow,
   OcListToolbar,
   OcLiveFrame,
@@ -561,6 +577,7 @@ export const components: Record<string, Component> = {
   OcOtpInput,
   OcPageHeader,
   OcPagination,
+  OcPanel,
   OcPasswordInput,
   OcPasswordRequirements,
   OcPhoneInput,
@@ -577,6 +594,7 @@ export const components: Record<string, Component> = {
   OcRating,
   OcRatingInput,
   OcRecoveryCodes,
+  OcResult,
   OcRibbon,
   OcScrollArea,
   OcSegmented,
@@ -634,6 +652,7 @@ export const components: Record<string, Component> = {
   OcBlockAppShell,
   OcBlockAuth,
   OcBlockAuthSplit,
+  OcBlockContactForm,
   OcBlockContactGrid,
   OcBlockCta,
   OcBlockDataTable,