@birdycom/omniaui-vue 0.11.0 → 0.11.1

package/src/components/OcNextTeaser.vue

@@ -1,25 +1,25 @@
-<!-- File: packages/vue/src/components/OcNextTeaser.vue | Map: props -> a.oc-next-teaser -> label -> name (mark slot) -> tagline -->
-<script setup lang="ts">
-/**
- * "Next product" teaser card. Slots: mark (e.g. an OcProductMark size="sm"), name, tagline.
- * Classes: .oc-next-teaser (--prev), __label, __name, __tagline
- */
-withDefaults(
-  defineProps<{
-    href: string
-    label?: string
-    name?: string
-    tagline?: string
-    prev?: boolean
-  }>(),
-  { label: 'Next product' },
-)
-</script>
-
-<template>
-  <a :class="['oc-next-teaser', prev && 'oc-next-teaser--prev']" :href="href">
-    <span v-if="label" class="oc-next-teaser__label">{{ label }}</span>
-    <span class="oc-next-teaser__name"><slot name="mark" /><slot name="name">{{ name }}</slot></span>
-    <span v-if="tagline || $slots.tagline" class="oc-next-teaser__tagline"><slot name="tagline">{{ tagline }}</slot></span>
-  </a>
-</template>
+<!-- File: packages/vue/src/components/OcNextTeaser.vue | Map: props -> a.oc-next-teaser -> label -> name (mark slot) -> tagline -->
+<script setup lang="ts">
+/**
+ * "Next product" teaser card. Slots: mark (e.g. an OcProductMark size="sm"), name, tagline.
+ * Classes: .oc-next-teaser (--prev), __label, __name, __tagline
+ */
+withDefaults(
+  defineProps<{
+    href: string
+    label?: string
+    name?: string
+    tagline?: string
+    prev?: boolean
+  }>(),
+  { label: 'Next product' },
+)
+</script>
+
+<template>
+  <a :class="['oc-next-teaser', prev && 'oc-next-teaser--prev']" :href="href">
+    <span v-if="label" class="oc-next-teaser__label">{{ label }}</span>
+    <span class="oc-next-teaser__name"><slot name="mark" /><slot name="name">{{ name }}</slot></span>
+    <span v-if="tagline || $slots.tagline" class="oc-next-teaser__tagline"><slot name="tagline">{{ tagline }}</slot></span>
+  </a>
+</template>

package/src/components/OcNumberInput.vue

@@ -1,47 +1,47 @@
-<!-- File: packages/vue/src/components/OcNumberInput.vue | Map: props + model -> step helper -> template (minus, number field, plus) -->
-<script setup lang="ts">
-/**
- * Number field with - / + buttons. v-model: number | null. Buttons disable themselves at min / max.
- * Same markup as packages/ui/snippets/number-input.html (no page script needed here).
- * class/style stay on the frame, other attributes (id, name, aria-label) go to the input.
- */
-import { useAttrsSplit } from '../composables/useAttrsSplit'
-
-defineOptions({ inheritAttrs: false })
-const props = withDefaults(
-  defineProps<{ min?: number; max?: number; step?: number; size?: 'sm' | 'md'; block?: boolean; error?: boolean; disabled?: boolean; decrementLabel?: string; incrementLabel?: string }>(),
-  { step: 1, size: 'md', decrementLabel: 'Decrease', incrementLabel: 'Increase' },
-)
-const model = defineModel<number | null>({ default: null })
-const { root, control } = useAttrsSplit()
-
-/** Add one step, keep the result inside min/max and drop float noise (0.1 + 0.2). */
-function stepBy(dir: 1 | -1) {
-  const next = Math.round(((model.value ?? props.min ?? 0) + dir * props.step) * 1e6) / 1e6
-  model.value = Math.min(props.max ?? Infinity, Math.max(props.min ?? -Infinity, next))
-}
-
-function onInput(e: Event) {
-  const raw = (e.target as HTMLInputElement).value
-  model.value = raw === '' ? null : Number(raw)
-}
-</script>
-
-<template>
-  <div v-bind="root" :class="['oc-number-input', size === 'sm' && 'oc-number-input--sm', block && 'oc-number-input--block', error && 'oc-number-input--error']">
-    <button class="oc-number-input-step" type="button" :aria-label="decrementLabel" :disabled="disabled || (min != null && model != null && model <= min)" @click="stepBy(-1)">&minus;</button>
-    <input
-      v-bind="control"
-      class="oc-number-input-field"
-      type="number"
-      :min="min"
-      :max="max"
-      :step="step"
-      :disabled="disabled"
-      :aria-invalid="error ? 'true' : undefined"
-      :value="model ?? ''"
-      @input="onInput"
-    />
-    <button class="oc-number-input-step" type="button" :aria-label="incrementLabel" :disabled="disabled || (max != null && model != null && model >= max)" @click="stepBy(1)">+</button>
-  </div>
-</template>
+<!-- File: packages/vue/src/components/OcNumberInput.vue | Map: props + model -> step helper -> template (minus, number field, plus) -->
+<script setup lang="ts">
+/**
+ * Number field with - / + buttons. v-model: number | null. Buttons disable themselves at min / max.
+ * Same markup as packages/ui/snippets/number-input.html (no page script needed here).
+ * class/style stay on the frame, other attributes (id, name, aria-label) go to the input.
+ */
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+
+defineOptions({ inheritAttrs: false })
+const props = withDefaults(
+  defineProps<{ min?: number; max?: number; step?: number; size?: 'sm' | 'md'; block?: boolean; error?: boolean; disabled?: boolean; decrementLabel?: string; incrementLabel?: string }>(),
+  { step: 1, size: 'md', decrementLabel: 'Decrease', incrementLabel: 'Increase' },
+)
+const model = defineModel<number | null>({ default: null })
+const { root, control } = useAttrsSplit()
+
+/** Add one step, keep the result inside min/max and drop float noise (0.1 + 0.2). */
+function stepBy(dir: 1 | -1) {
+  const next = Math.round(((model.value ?? props.min ?? 0) + dir * props.step) * 1e6) / 1e6
+  model.value = Math.min(props.max ?? Infinity, Math.max(props.min ?? -Infinity, next))
+}
+
+function onInput(e: Event) {
+  const raw = (e.target as HTMLInputElement).value
+  model.value = raw === '' ? null : Number(raw)
+}
+</script>
+
+<template>
+  <div v-bind="root" :class="['oc-number-input', size === 'sm' && 'oc-number-input--sm', block && 'oc-number-input--block', error && 'oc-number-input--error']">
+    <button class="oc-number-input-step" type="button" :aria-label="decrementLabel" :disabled="disabled || (min != null && model != null && model <= min)" @click="stepBy(-1)">&minus;</button>
+    <input
+      v-bind="control"
+      class="oc-number-input-field"
+      type="number"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disabled="disabled"
+      :aria-invalid="error ? 'true' : undefined"
+      :value="model ?? ''"
+      @input="onInput"
+    />
+    <button class="oc-number-input-step" type="button" :aria-label="incrementLabel" :disabled="disabled || (max != null && model != null && model >= max)" @click="stepBy(1)">+</button>
+  </div>
+</template>

package/src/components/OcOtpInput.vue

@@ -1,34 +1,34 @@
-<script setup lang="ts">
-/**
- * One-time code field drawn as separate cells on a single real input.
- * v-model: the code string. `length` sets maxlength and --oc-otp-length. `invalid` sets aria-invalid.
- * Emits `complete` with the code when it reaches `length`.
- */
-import { computed, watch } from 'vue'
-
-const props = withDefaults(defineProps<{ length?: number; invalid?: boolean; numeric?: boolean }>(), {
-  length: 6,
-  numeric: true,
-})
-const emit = defineEmits<{ complete: [code: string] }>()
-const model = defineModel<string>({ default: '' })
-const style = computed(() => ({ '--oc-otp-length': String(props.length) }))
-
-watch(model, (code) => {
-  if (code.length === props.length) emit('complete', code)
-})
-</script>
-
-<template>
-  <input
-    v-model="model"
-    class="oc-otp"
-    type="text"
-    :inputmode="numeric ? 'numeric' : 'text'"
-    autocomplete="one-time-code"
-    :maxlength="length"
-    :pattern="numeric ? '[0-9]*' : undefined"
-    :aria-invalid="invalid ? 'true' : undefined"
-    :style="style"
-  />
-</template>
+<script setup lang="ts">
+/**
+ * One-time code field drawn as separate cells on a single real input.
+ * v-model: the code string. `length` sets maxlength and --oc-otp-length. `invalid` sets aria-invalid.
+ * Emits `complete` with the code when it reaches `length`.
+ */
+import { computed, watch } from 'vue'
+
+const props = withDefaults(defineProps<{ length?: number; invalid?: boolean; numeric?: boolean }>(), {
+  length: 6,
+  numeric: true,
+})
+const emit = defineEmits<{ complete: [code: string] }>()
+const model = defineModel<string>({ default: '' })
+const style = computed(() => ({ '--oc-otp-length': String(props.length) }))
+
+watch(model, (code) => {
+  if (code.length === props.length) emit('complete', code)
+})
+</script>
+
+<template>
+  <input
+    v-model="model"
+    class="oc-otp"
+    type="text"
+    :inputmode="numeric ? 'numeric' : 'text'"
+    autocomplete="one-time-code"
+    :maxlength="length"
+    :pattern="numeric ? '[0-9]*' : undefined"
+    :aria-invalid="invalid ? 'true' : undefined"
+    :style="style"
+  />
+</template>

package/src/components/OcPageHeader.vue

@@ -1,34 +1,34 @@
-<!-- File: packages/vue/src/components/OcPageHeader.vue | Map: header -> back slot -> main (text: title, subtitle, meta slot | actions slot) -->
-<script setup lang="ts">
-/**
- * Title row of an app page (size container: actions sit next to the title from a 36rem header width).
- * Slots: back, title, subtitle, meta, actions.
- * Classes: .oc-page-header(--bordered/--sticky/--sm), -back, -main, -text, -title, -subtitle, -meta, -actions
- */
-withDefaults(
-  defineProps<{
-    title?: string
-    subtitle?: string
-    /** Heading level of the title (default 1). */
-    level?: 1 | 2 | 3
-    bordered?: boolean
-    sticky?: boolean
-    size?: 'sm'
-  }>(),
-  { level: 1 },
-)
-</script>
-
-<template>
-  <header :class="['oc-page-header', bordered && 'oc-page-header--bordered', sticky && 'oc-page-header--sticky', size && `oc-page-header--${size}`]">
-    <div v-if="$slots.back" class="oc-page-header-back"><slot name="back" /></div>
-    <div class="oc-page-header-main">
-      <div class="oc-page-header-text">
-        <component :is="`h${level}`" class="oc-page-header-title"><slot name="title">{{ title }}</slot></component>
-        <p v-if="$slots.subtitle || subtitle" class="oc-page-header-subtitle"><slot name="subtitle">{{ subtitle }}</slot></p>
-        <div v-if="$slots.meta" class="oc-page-header-meta"><slot name="meta" /></div>
-      </div>
-      <div v-if="$slots.actions" class="oc-page-header-actions"><slot name="actions" /></div>
-    </div>
-  </header>
-</template>
+<!-- File: packages/vue/src/components/OcPageHeader.vue | Map: header -> back slot -> main (text: title, subtitle, meta slot | actions slot) -->
+<script setup lang="ts">
+/**
+ * Title row of an app page (size container: actions sit next to the title from a 36rem header width).
+ * Slots: back, title, subtitle, meta, actions.
+ * Classes: .oc-page-header(--bordered/--sticky/--sm), -back, -main, -text, -title, -subtitle, -meta, -actions
+ */
+withDefaults(
+  defineProps<{
+    title?: string
+    subtitle?: string
+    /** Heading level of the title (default 1). */
+    level?: 1 | 2 | 3
+    bordered?: boolean
+    sticky?: boolean
+    size?: 'sm'
+  }>(),
+  { level: 1 },
+)
+</script>
+
+<template>
+  <header :class="['oc-page-header', bordered && 'oc-page-header--bordered', sticky && 'oc-page-header--sticky', size && `oc-page-header--${size}`]">
+    <div v-if="$slots.back" class="oc-page-header-back"><slot name="back" /></div>
+    <div class="oc-page-header-main">
+      <div class="oc-page-header-text">
+        <component :is="`h${level}`" class="oc-page-header-title"><slot name="title">{{ title }}</slot></component>
+        <p v-if="$slots.subtitle || subtitle" class="oc-page-header-subtitle"><slot name="subtitle">{{ subtitle }}</slot></p>
+        <div v-if="$slots.meta" class="oc-page-header-meta"><slot name="meta" /></div>
+      </div>
+      <div v-if="$slots.actions" class="oc-page-header-actions"><slot name="actions" /></div>
+    </div>
+  </header>
+</template>

package/src/components/OcPagination.vue

@@ -1,33 +1,33 @@
-<script setup lang="ts">
-/**
- * Pagination. v-model = current page (1-based), `pages` = page count. Links point to
- * `hrefFor(page)` (default ?page=n); without a custom hrefFor, clicks update the model instead of navigating.
- */
-const props = withDefaults(
-  defineProps<{
-    pages: number
-    hrefFor?: (page: number) => string
-    label?: string
-  }>(),
-  { label: 'Pagination' },
-)
-const page = defineModel<number>({ default: 1 })
-
-function go(e: Event, n: number) {
-  if (!props.hrefFor) e.preventDefault()
-  page.value = n
-}
-</script>
-
-<template>
-  <nav class="oc-pagination" :aria-label="label">
-    <a
-      v-for="n in pages"
-      :key="n"
-      class="oc-pagination-item"
-      :href="hrefFor ? hrefFor(n) : `?page=${n}`"
-      :aria-current="n === page ? 'page' : undefined"
-      @click="go($event, n)"
-    >{{ n }}</a>
-  </nav>
-</template>
+<script setup lang="ts">
+/**
+ * Pagination. v-model = current page (1-based), `pages` = page count. Links point to
+ * `hrefFor(page)` (default ?page=n); without a custom hrefFor, clicks update the model instead of navigating.
+ */
+const props = withDefaults(
+  defineProps<{
+    pages: number
+    hrefFor?: (page: number) => string
+    label?: string
+  }>(),
+  { label: 'Pagination' },
+)
+const page = defineModel<number>({ default: 1 })
+
+function go(e: Event, n: number) {
+  if (!props.hrefFor) e.preventDefault()
+  page.value = n
+}
+</script>
+
+<template>
+  <nav class="oc-pagination" :aria-label="label">
+    <a
+      v-for="n in pages"
+      :key="n"
+      class="oc-pagination-item"
+      :href="hrefFor ? hrefFor(n) : `?page=${n}`"
+      :aria-current="n === page ? 'page' : undefined"
+      @click="go($event, n)"
+    >{{ n }}</a>
+  </nav>
+</template>

package/src/components/OcPasswordInput.vue

@@ -1,27 +1,27 @@
-<script setup lang="ts">
-/**
- * Password field with show/hide button (aria-pressed reflects the state). v-model.
- * class/style stay on the wrapper, every other attribute (id, name, autocomplete...) goes to the input.
- */
-import { ref } from 'vue'
-import { useAttrsSplit } from '../composables/useAttrsSplit'
-
-defineOptions({ inheritAttrs: false })
-withDefaults(defineProps<{ showLabel?: string; hideLabel?: string; toggleLabel?: string }>(), {
-  showLabel: 'Show',
-  hideLabel: 'Hide',
-  toggleLabel: 'Toggle password visibility',
-})
-const model = defineModel<string>({ default: '' })
-const { root, control } = useAttrsSplit()
-const visible = ref(false)
-</script>
-
-<template>
-  <div v-bind="root" class="oc-input-reveal">
-    <input v-bind="control" v-model="model" class="oc-input" :type="visible ? 'text' : 'password'" />
-    <button class="oc-input-reveal-button" type="button" :aria-pressed="visible ? 'true' : 'false'" :aria-label="toggleLabel" @click="visible = !visible">
-      {{ visible ? hideLabel : showLabel }}
-    </button>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Password field with show/hide button (aria-pressed reflects the state). v-model.
+ * class/style stay on the wrapper, every other attribute (id, name, autocomplete...) goes to the input.
+ */
+import { ref } from 'vue'
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+
+defineOptions({ inheritAttrs: false })
+withDefaults(defineProps<{ showLabel?: string; hideLabel?: string; toggleLabel?: string }>(), {
+  showLabel: 'Show',
+  hideLabel: 'Hide',
+  toggleLabel: 'Toggle password visibility',
+})
+const model = defineModel<string>({ default: '' })
+const { root, control } = useAttrsSplit()
+const visible = ref(false)
+</script>
+
+<template>
+  <div v-bind="root" class="oc-input-reveal">
+    <input v-bind="control" v-model="model" class="oc-input" :type="visible ? 'text' : 'password'" />
+    <button class="oc-input-reveal-button" type="button" :aria-pressed="visible ? 'true' : 'false'" :aria-label="toggleLabel" @click="visible = !visible">
+      {{ visible ? hideLabel : showLabel }}
+    </button>
+  </div>
+</template>

package/src/components/OcPasswordRequirements.vue

@@ -1,28 +1,28 @@
-<!-- File: packages/vue/src/components/OcPasswordRequirements.vue | Map: rule type + defaults -> props -> template (live list, --met per rule) -->
-<script setup lang="ts">
-/**
- * Live password rule checklist. Pass the password; each rule turns green (--met) when it passes.
- * Same markup as packages/ui/snippets/password-requirements.html.
- */
-export interface PasswordRequirementRule {
-  label: string
-  /** True when the password meets the rule. */
-  test: (password: string) => boolean
-}
-
-withDefaults(defineProps<{ password: string; rules?: PasswordRequirementRule[]; inline?: boolean; hideWhenEmpty?: boolean }>(), {
-  // Common rules: length, uppercase, number, symbol.
-  rules: () => [
-    { label: 'At least 8 characters', test: (p: string) => p.length >= 8 },
-    { label: 'One uppercase letter', test: (p: string) => /[A-Z]/.test(p) },
-    { label: 'One number', test: (p: string) => /[0-9]/.test(p) },
-    { label: 'One symbol', test: (p: string) => /[^A-Za-z0-9]/.test(p) },
-  ],
-})
-</script>
-
-<template>
-  <ul v-if="!hideWhenEmpty || password" :class="['oc-password-requirements', inline && 'oc-password-requirements--inline']" aria-live="polite">
-    <li v-for="(rule, i) in rules" :key="i" :class="['oc-password-requirement', rule.test(password) && 'oc-password-requirement--met']">{{ rule.label }}</li>
-  </ul>
-</template>
+<!-- File: packages/vue/src/components/OcPasswordRequirements.vue | Map: rule type + defaults -> props -> template (live list, --met per rule) -->
+<script setup lang="ts">
+/**
+ * Live password rule checklist. Pass the password; each rule turns green (--met) when it passes.
+ * Same markup as packages/ui/snippets/password-requirements.html.
+ */
+export interface PasswordRequirementRule {
+  label: string
+  /** True when the password meets the rule. */
+  test: (password: string) => boolean
+}
+
+withDefaults(defineProps<{ password: string; rules?: PasswordRequirementRule[]; inline?: boolean; hideWhenEmpty?: boolean }>(), {
+  // Common rules: length, uppercase, number, symbol.
+  rules: () => [
+    { label: 'At least 8 characters', test: (p: string) => p.length >= 8 },
+    { label: 'One uppercase letter', test: (p: string) => /[A-Z]/.test(p) },
+    { label: 'One number', test: (p: string) => /[0-9]/.test(p) },
+    { label: 'One symbol', test: (p: string) => /[^A-Za-z0-9]/.test(p) },
+  ],
+})
+</script>
+
+<template>
+  <ul v-if="!hideWhenEmpty || password" :class="['oc-password-requirements', inline && 'oc-password-requirements--inline']" aria-live="polite">
+    <li v-for="(rule, i) in rules" :key="i" :class="['oc-password-requirement', rule.test(password) && 'oc-password-requirement--met']">{{ rule.label }}</li>
+  </ul>
+</template>

package/src/components/OcPhoneInput.vue

@@ -1,72 +1,72 @@
-<!-- File: packages/vue/src/components/OcPhoneInput.vue | Map: props + model -> split / group helpers -> template (dial select + tel input) -->
-<script setup lang="ts">
-/**
- * Phone field: dial code select + national number. v-model = full value without spaces ("+32470123456").
- * Same markup as packages/ui/snippets/phone-input.html. JS only groups digits ("470 12 34 56").
- * class/style stay on the frame, other attributes (id, name, placeholder, aria-*) go to the number input.
- */
-import { computed, ref } from 'vue'
-import { useAttrsSplit } from '../composables/useAttrsSplit'
-
-export interface PhoneInputCountry {
-  dial: string
-  label: string
-}
-
-defineOptions({ inheritAttrs: false })
-const props = withDefaults(
-  defineProps<{ countries?: PhoneInputCountry[]; defaultDial?: string; size?: 'sm' | 'md'; error?: boolean; disabled?: boolean; dialLabel?: string }>(),
-  {
-    countries: () => [
-      { dial: '+32', label: 'BE +32' },
-      { dial: '+31', label: 'NL +31' },
-      { dial: '+33', label: 'FR +33' },
-      { dial: '+49', label: 'DE +49' },
-    ],
-    size: 'md',
-    dialLabel: 'Country code',
-  },
-)
-const model = defineModel<string>({ default: '' })
-const { root, control } = useAttrsSplit()
-
-// Longest dial code that the value starts with, e.g. "+32" from "+32470...".
-const parsed = computed(() => {
-  const match = [...props.countries].sort((a, b) => b.dial.length - a.dial.length).find((c) => model.value.startsWith(c.dial))
-  return match ? { dial: match.dial, national: model.value.slice(match.dial.length) } : { dial: '', national: model.value.replace(/^\+/, '') }
-})
-// Remember the chosen dial code while the number is still empty.
-const dialState = ref(parsed.value.dial || props.defaultDial || props.countries[0]?.dial || '')
-const dial = computed(() => parsed.value.dial || dialState.value)
-
-/** "470123456" -> "470 12 34 56": a group of 3, then pairs. */
-const grouped = computed(() => {
-  const d = parsed.value.national.replace(/\D/g, '')
-  return [d.slice(0, 3), ...(d.slice(3).match(/.{1,2}/g) ?? [])].filter(Boolean).join(' ')
-})
-
-function emit(nextDial: string, national: string) {
-  dialState.value = nextDial
-  const digits = national.replace(/\D/g, '')
-  model.value = digits ? nextDial + digits : ''
-}
-</script>
-
-<template>
-  <div v-bind="root" :class="['oc-phone-input', size === 'sm' && 'oc-phone-input--sm', error && 'oc-phone-input--error']">
-    <select class="oc-phone-input-dial" :aria-label="dialLabel" :value="dial" :disabled="disabled" @change="emit(($event.target as HTMLSelectElement).value, parsed.national)">
-      <option v-for="c in countries" :key="c.dial" :value="c.dial">{{ c.label }}</option>
-    </select>
-    <input
-      v-bind="control"
-      class="oc-phone-input-number"
-      type="tel"
-      inputmode="tel"
-      autocomplete="tel-national"
-      :aria-invalid="error ? 'true' : undefined"
-      :disabled="disabled"
-      :value="grouped"
-      @input="emit(dial, ($event.target as HTMLInputElement).value)"
-    />
-  </div>
-</template>
+<!-- File: packages/vue/src/components/OcPhoneInput.vue | Map: props + model -> split / group helpers -> template (dial select + tel input) -->
+<script setup lang="ts">
+/**
+ * Phone field: dial code select + national number. v-model = full value without spaces ("+32470123456").
+ * Same markup as packages/ui/snippets/phone-input.html. JS only groups digits ("470 12 34 56").
+ * class/style stay on the frame, other attributes (id, name, placeholder, aria-*) go to the number input.
+ */
+import { computed, ref } from 'vue'
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+
+export interface PhoneInputCountry {
+  dial: string
+  label: string
+}
+
+defineOptions({ inheritAttrs: false })
+const props = withDefaults(
+  defineProps<{ countries?: PhoneInputCountry[]; defaultDial?: string; size?: 'sm' | 'md'; error?: boolean; disabled?: boolean; dialLabel?: string }>(),
+  {
+    countries: () => [
+      { dial: '+32', label: 'BE +32' },
+      { dial: '+31', label: 'NL +31' },
+      { dial: '+33', label: 'FR +33' },
+      { dial: '+49', label: 'DE +49' },
+    ],
+    size: 'md',
+    dialLabel: 'Country code',
+  },
+)
+const model = defineModel<string>({ default: '' })
+const { root, control } = useAttrsSplit()
+
+// Longest dial code that the value starts with, e.g. "+32" from "+32470...".
+const parsed = computed(() => {
+  const match = [...props.countries].sort((a, b) => b.dial.length - a.dial.length).find((c) => model.value.startsWith(c.dial))
+  return match ? { dial: match.dial, national: model.value.slice(match.dial.length) } : { dial: '', national: model.value.replace(/^\+/, '') }
+})
+// Remember the chosen dial code while the number is still empty.
+const dialState = ref(parsed.value.dial || props.defaultDial || props.countries[0]?.dial || '')
+const dial = computed(() => parsed.value.dial || dialState.value)
+
+/** "470123456" -> "470 12 34 56": a group of 3, then pairs. */
+const grouped = computed(() => {
+  const d = parsed.value.national.replace(/\D/g, '')
+  return [d.slice(0, 3), ...(d.slice(3).match(/.{1,2}/g) ?? [])].filter(Boolean).join(' ')
+})
+
+function emit(nextDial: string, national: string) {
+  dialState.value = nextDial
+  const digits = national.replace(/\D/g, '')
+  model.value = digits ? nextDial + digits : ''
+}
+</script>
+
+<template>
+  <div v-bind="root" :class="['oc-phone-input', size === 'sm' && 'oc-phone-input--sm', error && 'oc-phone-input--error']">
+    <select class="oc-phone-input-dial" :aria-label="dialLabel" :value="dial" :disabled="disabled" @change="emit(($event.target as HTMLSelectElement).value, parsed.national)">
+      <option v-for="c in countries" :key="c.dial" :value="c.dial">{{ c.label }}</option>
+    </select>
+    <input
+      v-bind="control"
+      class="oc-phone-input-number"
+      type="tel"
+      inputmode="tel"
+      autocomplete="tel-national"
+      :aria-invalid="error ? 'true' : undefined"
+      :disabled="disabled"
+      :value="grouped"
+      @input="emit(dial, ($event.target as HTMLInputElement).value)"
+    />
+  </div>
+</template>