@birdycom/omniaui-vue 0.11.0 → 0.11.1

package/src/components/OcCollapsible.vue

@@ -1,19 +1,19 @@
-<script setup lang="ts">
-/** Card-style details/summary section. v-model:open. Slots: icon, title, default (content). Classes: --dense */
-defineProps<{ title?: string; dense?: boolean }>()
-const open = defineModel<boolean>('open', { default: false })
-
-function onToggle(e: Event) {
-  open.value = (e.target as HTMLDetailsElement).open
-}
-</script>
-
-<template>
-  <details :class="['oc-collapsible', dense && 'oc-collapsible--dense']" :open="open" @toggle="onToggle">
-    <summary>
-      <slot name="icon" />
-      <span class="oc-collapsible-title"><slot name="title">{{ title }}</slot></span>
-    </summary>
-    <div class="oc-collapsible-content"><slot /></div>
-  </details>
-</template>
+<script setup lang="ts">
+/** Card-style details/summary section. v-model:open. Slots: icon, title, default (content). Classes: --dense */
+defineProps<{ title?: string; dense?: boolean }>()
+const open = defineModel<boolean>('open', { default: false })
+
+function onToggle(e: Event) {
+  open.value = (e.target as HTMLDetailsElement).open
+}
+</script>
+
+<template>
+  <details :class="['oc-collapsible', dense && 'oc-collapsible--dense']" :open="open" @toggle="onToggle">
+    <summary>
+      <slot name="icon" />
+      <span class="oc-collapsible-title"><slot name="title">{{ title }}</slot></span>
+    </summary>
+    <div class="oc-collapsible-content"><slot /></div>
+  </details>
+</template>

package/src/components/OcColorField.vue

@@ -1,15 +1,15 @@
-<script setup lang="ts">
-/** Native color picker next to a hex text input, kept in sync. v-model: color string (#rrggbb). */
-withDefaults(defineProps<{ pickerLabel?: string; valueLabel?: string }>(), {
-  pickerLabel: 'Pick a color',
-  valueLabel: 'Color value',
-})
-const model = defineModel<string>({ default: '#000000' })
-</script>
-
-<template>
-  <div class="oc-color-field">
-    <input v-model="model" type="color" :aria-label="pickerLabel" />
-    <input v-model="model" class="oc-input" type="text" :aria-label="valueLabel" />
-  </div>
-</template>
+<script setup lang="ts">
+/** Native color picker next to a hex text input, kept in sync. v-model: color string (#rrggbb). */
+withDefaults(defineProps<{ pickerLabel?: string; valueLabel?: string }>(), {
+  pickerLabel: 'Pick a color',
+  valueLabel: 'Color value',
+})
+const model = defineModel<string>({ default: '#000000' })
+</script>
+
+<template>
+  <div class="oc-color-field">
+    <input v-model="model" type="color" :aria-label="pickerLabel" />
+    <input v-model="model" class="oc-input" type="text" :aria-label="valueLabel" />
+  </div>
+</template>

package/src/components/OcColorSelect.vue

@@ -1,33 +1,33 @@
-<!-- File: packages/vue/src/components/OcColorSelect.vue | Map: types + props -> template (fieldset radiogroup -> label per color) -->
-<script setup lang="ts">
-/** Pick one color from swatches. v-model = selected value. Classes: .oc-color-select(--list/--sm), -option, -swatch, -name */
-import { useUid } from '../composables/useUid'
-
-export interface ColorSelectItem {
-  value: string
-  label: string
-  /** CSS color, use Omnia tokens: "var(--color-red-70)". */
-  color: string
-  disabled?: boolean
-}
-defineProps<{
-  options: ColorSelectItem[]
-  /** aria-label of the group */
-  label?: string
-  list?: boolean
-  size?: 'sm' | 'md'
-  name?: string
-}>()
-const model = defineModel<string>()
-const uid = useUid('oc-color')
-</script>
-
-<template>
-  <fieldset :class="['oc-color-select', list && 'oc-color-select--list', size === 'sm' && 'oc-color-select--sm']" role="radiogroup" :aria-label="label">
-    <label v-for="option in options" :key="option.value" class="oc-color-select-option" :style="{ '--oc-swatch': option.color }">
-      <input v-model="model" type="radio" :name="name ?? uid" :value="option.value" :disabled="option.disabled" />
-      <span class="oc-color-select-swatch"></span>
-      <span class="oc-color-select-name">{{ option.label }}</span>
-    </label>
-  </fieldset>
-</template>
+<!-- File: packages/vue/src/components/OcColorSelect.vue | Map: types + props -> template (fieldset radiogroup -> label per color) -->
+<script setup lang="ts">
+/** Pick one color from swatches. v-model = selected value. Classes: .oc-color-select(--list/--sm), -option, -swatch, -name */
+import { useUid } from '../composables/useUid'
+
+export interface ColorSelectItem {
+  value: string
+  label: string
+  /** CSS color, use Omnia tokens: "var(--color-red-70)". */
+  color: string
+  disabled?: boolean
+}
+defineProps<{
+  options: ColorSelectItem[]
+  /** aria-label of the group */
+  label?: string
+  list?: boolean
+  size?: 'sm' | 'md'
+  name?: string
+}>()
+const model = defineModel<string>()
+const uid = useUid('oc-color')
+</script>
+
+<template>
+  <fieldset :class="['oc-color-select', list && 'oc-color-select--list', size === 'sm' && 'oc-color-select--sm']" role="radiogroup" :aria-label="label">
+    <label v-for="option in options" :key="option.value" class="oc-color-select-option" :style="{ '--oc-swatch': option.color }">
+      <input v-model="model" type="radio" :name="name ?? uid" :value="option.value" :disabled="option.disabled" />
+      <span class="oc-color-select-swatch"></span>
+      <span class="oc-color-select-name">{{ option.label }}</span>
+    </label>
+  </fieldset>
+</template>

package/src/components/OcColumnMenu.vue

@@ -1,50 +1,50 @@
-<!-- File: packages/vue/src/components/OcColumnMenu.vue | Map: scope -> toolbar trigger -> popover (title, form with one checkbox per column, reset) -> default slot (the table) -->
-<script setup lang="ts">
-/**
- * Column visibility menu. CSS hides column n of the table in the default slot when [data-col="n"] is unchecked.
- * Checkboxes are uncontrolled, so "Reset" (form reset) restores the defaults. Emits `toggle(column, visible)`.
- * Classes: .oc-column-menu-scope, .oc-column-menu[popover], -title, form.oc-column-menu-list, -item, -footer
- */
-import { useUid } from '../composables/useUid'
-
-withDefaults(
-  defineProps<{
-    /** One entry per column, in order (max 10). */
-    columns: Array<{ label: string; visible?: boolean; locked?: boolean }>
-    triggerLabel?: string
-    title?: string
-    resetLabel?: string
-  }>(),
-  { triggerLabel: 'Columns', title: 'Visible columns', resetLabel: 'Reset' },
-)
-const emit = defineEmits<{ toggle: [column: number, visible: boolean] }>()
-const menuId = useUid('oc-column-menu')
-</script>
-
-<template>
-  <div class="oc-column-menu-scope">
-    <div class="oc-table-toolbar">
-      <span class="oc-table-toolbar-spacer"></span>
-      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" :popovertarget="menuId">{{ triggerLabel }}</button>
-    </div>
-    <div :id="menuId" class="oc-column-menu" popover>
-      <p class="oc-column-menu-title">{{ title }}</p>
-      <form class="oc-column-menu-list">
-        <label v-for="(col, i) in columns" :key="i" class="oc-column-menu-item">
-          <input
-            type="checkbox"
-            :data-col="i + 1"
-            :checked="col.locked || col.visible !== false"
-            :disabled="col.locked"
-            @change="emit('toggle', i + 1, ($event.target as HTMLInputElement).checked)"
-          />
-          {{ col.label }}
-        </label>
-        <div class="oc-column-menu-footer">
-          <button class="oc-btn oc-btn--ghost oc-btn--sm" type="reset">{{ resetLabel }}</button>
-        </div>
-      </form>
-    </div>
-    <slot />
-  </div>
-</template>
+<!-- File: packages/vue/src/components/OcColumnMenu.vue | Map: scope -> toolbar trigger -> popover (title, form with one checkbox per column, reset) -> default slot (the table) -->
+<script setup lang="ts">
+/**
+ * Column visibility menu. CSS hides column n of the table in the default slot when [data-col="n"] is unchecked.
+ * Checkboxes are uncontrolled, so "Reset" (form reset) restores the defaults. Emits `toggle(column, visible)`.
+ * Classes: .oc-column-menu-scope, .oc-column-menu[popover], -title, form.oc-column-menu-list, -item, -footer
+ */
+import { useUid } from '../composables/useUid'
+
+withDefaults(
+  defineProps<{
+    /** One entry per column, in order (max 10). */
+    columns: Array<{ label: string; visible?: boolean; locked?: boolean }>
+    triggerLabel?: string
+    title?: string
+    resetLabel?: string
+  }>(),
+  { triggerLabel: 'Columns', title: 'Visible columns', resetLabel: 'Reset' },
+)
+const emit = defineEmits<{ toggle: [column: number, visible: boolean] }>()
+const menuId = useUid('oc-column-menu')
+</script>
+
+<template>
+  <div class="oc-column-menu-scope">
+    <div class="oc-table-toolbar">
+      <span class="oc-table-toolbar-spacer"></span>
+      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" :popovertarget="menuId">{{ triggerLabel }}</button>
+    </div>
+    <div :id="menuId" class="oc-column-menu" popover>
+      <p class="oc-column-menu-title">{{ title }}</p>
+      <form class="oc-column-menu-list">
+        <label v-for="(col, i) in columns" :key="i" class="oc-column-menu-item">
+          <input
+            type="checkbox"
+            :data-col="i + 1"
+            :checked="col.locked || col.visible !== false"
+            :disabled="col.locked"
+            @change="emit('toggle', i + 1, ($event.target as HTMLInputElement).checked)"
+          />
+          {{ col.label }}
+        </label>
+        <div class="oc-column-menu-footer">
+          <button class="oc-btn oc-btn--ghost oc-btn--sm" type="reset">{{ resetLabel }}</button>
+        </div>
+      </form>
+    </div>
+    <slot />
+  </div>
+</template>

package/src/components/OcCommand.vue

@@ -1,119 +1,119 @@
-<script setup lang="ts">
-/**
- * Command palette / searchable list. Filtering, aria-selected and keyboard navigation
- * (ArrowUp/ArrowDown/Enter) are handled here (the CSS only styles the markup).
- * v-model:query is the search text. Emits `select` with the chosen item.
- * Classes: .oc-command, -input, -list, -group-label, -item, -shortcut, -separator, -empty
- */
-import { computed, ref, watch } from 'vue'
-
-export interface CommandItem {
-  label: string
-  value?: string
-  group?: string
-  shortcut?: string
-  disabled?: boolean
-}
-
-const props = withDefaults(
-  defineProps<{
-    items: CommandItem[]
-    placeholder?: string
-    label?: string
-    emptyText?: string
-  }>(),
-  { placeholder: 'Type a command or search...', label: 'Search commands', emptyText: 'No results found.' },
-)
-const emit = defineEmits<{ select: [item: CommandItem] }>()
-const query = defineModel<string>('query', { default: '' })
-
-const filtered = computed(() => {
-  const q = query.value.trim().toLowerCase()
-  return q ? props.items.filter((i) => i.label.toLowerCase().includes(q)) : props.items
-})
-
-const sections = computed(() => {
-  const order: string[] = []
-  const map = new Map<string, CommandItem[]>()
-  for (const item of filtered.value) {
-    const key = item.group ?? ''
-    if (!map.has(key)) {
-      map.set(key, [])
-      order.push(key)
-    }
-    map.get(key)!.push(item)
-  }
-  return order.map((key) => ({ label: key, items: map.get(key)! }))
-})
-
-const flat = computed(() => sections.value.flatMap((s) => s.items))
-const active = ref(0)
-
-function firstEnabled(from = 0, step = 1) {
-  const list = flat.value
-  for (let i = from; i >= 0 && i < list.length; i += step) if (!list[i].disabled) return i
-  return -1
-}
-
-watch(flat, () => {
-  active.value = Math.max(firstEnabled(), 0)
-})
-
-function move(step: 1 | -1) {
-  const next = firstEnabled(active.value + step, step)
-  if (next !== -1) active.value = next
-}
-
-function choose(item: CommandItem) {
-  if (!item.disabled) emit('select', item)
-}
-
-function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'ArrowDown') {
-    e.preventDefault()
-    move(1)
-  } else if (e.key === 'ArrowUp') {
-    e.preventDefault()
-    move(-1)
-  } else if (e.key === 'Enter') {
-    const item = flat.value[active.value]
-    if (item) {
-      e.preventDefault()
-      choose(item)
-    }
-  }
-}
-</script>
-
-<template>
-  <div class="oc-command" role="combobox" aria-expanded="true" aria-haspopup="listbox">
-    <input
-      v-model="query"
-      class="oc-command-input"
-      type="search"
-      :placeholder="placeholder"
-      :aria-label="label"
-      @keydown="onKeydown"
-    />
-    <ul class="oc-command-list" role="listbox">
-      <template v-for="(section, s) in sections" :key="section.label + s">
-        <li v-if="s > 0" class="oc-command-separator" role="separator"></li>
-        <li v-if="section.label" class="oc-command-group-label" role="presentation">{{ section.label }}</li>
-        <li
-          v-for="item in section.items"
-          :key="item.value ?? item.label"
-          class="oc-command-item"
-          role="option"
-          :aria-selected="flat[active] === item ? 'true' : undefined"
-          :aria-disabled="item.disabled ? 'true' : undefined"
-          @click="choose(item)"
-          @mousemove="!item.disabled && (active = flat.indexOf(item))"
-        >
-          {{ item.label }}
-          <span v-if="item.shortcut" class="oc-command-shortcut">{{ item.shortcut }}</span>
-        </li>
-      </template>
-    </ul>
-    <div class="oc-command-empty" :hidden="flat.length > 0">{{ emptyText }}</div>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Command palette / searchable list. Filtering, aria-selected and keyboard navigation
+ * (ArrowUp/ArrowDown/Enter) are handled here (the CSS only styles the markup).
+ * v-model:query is the search text. Emits `select` with the chosen item.
+ * Classes: .oc-command, -input, -list, -group-label, -item, -shortcut, -separator, -empty
+ */
+import { computed, ref, watch } from 'vue'
+
+export interface CommandItem {
+  label: string
+  value?: string
+  group?: string
+  shortcut?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    items: CommandItem[]
+    placeholder?: string
+    label?: string
+    emptyText?: string
+  }>(),
+  { placeholder: 'Type a command or search...', label: 'Search commands', emptyText: 'No results found.' },
+)
+const emit = defineEmits<{ select: [item: CommandItem] }>()
+const query = defineModel<string>('query', { default: '' })
+
+const filtered = computed(() => {
+  const q = query.value.trim().toLowerCase()
+  return q ? props.items.filter((i) => i.label.toLowerCase().includes(q)) : props.items
+})
+
+const sections = computed(() => {
+  const order: string[] = []
+  const map = new Map<string, CommandItem[]>()
+  for (const item of filtered.value) {
+    const key = item.group ?? ''
+    if (!map.has(key)) {
+      map.set(key, [])
+      order.push(key)
+    }
+    map.get(key)!.push(item)
+  }
+  return order.map((key) => ({ label: key, items: map.get(key)! }))
+})
+
+const flat = computed(() => sections.value.flatMap((s) => s.items))
+const active = ref(0)
+
+function firstEnabled(from = 0, step = 1) {
+  const list = flat.value
+  for (let i = from; i >= 0 && i < list.length; i += step) if (!list[i].disabled) return i
+  return -1
+}
+
+watch(flat, () => {
+  active.value = Math.max(firstEnabled(), 0)
+})
+
+function move(step: 1 | -1) {
+  const next = firstEnabled(active.value + step, step)
+  if (next !== -1) active.value = next
+}
+
+function choose(item: CommandItem) {
+  if (!item.disabled) emit('select', item)
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    move(1)
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    move(-1)
+  } else if (e.key === 'Enter') {
+    const item = flat.value[active.value]
+    if (item) {
+      e.preventDefault()
+      choose(item)
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="oc-command" role="combobox" aria-expanded="true" aria-haspopup="listbox">
+    <input
+      v-model="query"
+      class="oc-command-input"
+      type="search"
+      :placeholder="placeholder"
+      :aria-label="label"
+      @keydown="onKeydown"
+    />
+    <ul class="oc-command-list" role="listbox">
+      <template v-for="(section, s) in sections" :key="section.label + s">
+        <li v-if="s > 0" class="oc-command-separator" role="separator"></li>
+        <li v-if="section.label" class="oc-command-group-label" role="presentation">{{ section.label }}</li>
+        <li
+          v-for="item in section.items"
+          :key="item.value ?? item.label"
+          class="oc-command-item"
+          role="option"
+          :aria-selected="flat[active] === item ? 'true' : undefined"
+          :aria-disabled="item.disabled ? 'true' : undefined"
+          @click="choose(item)"
+          @mousemove="!item.disabled && (active = flat.indexOf(item))"
+        >
+          {{ item.label }}
+          <span v-if="item.shortcut" class="oc-command-shortcut">{{ item.shortcut }}</span>
+        </li>
+      </template>
+    </ul>
+    <div class="oc-command-empty" :hidden="flat.length > 0">{{ emptyText }}</div>
+  </div>
+</template>

package/src/components/OcConfirmDialog.vue

@@ -1,65 +1,65 @@
-<!-- File: packages/vue/src/components/OcConfirmDialog.vue | Map: dialog.oc-modal -> confirm content (close X, icon ring, title) -> form (message, typed field, footer: discard, cancel, confirm) -->
-<script setup lang="ts">
-/**
- * Confirm variant of the alert dialog. v-model:open. Emits `confirm`, `cancel`, `discard` (all close the dialog).
- * With `confirmWord` the browser blocks the submit until the typed value matches (pattern + required).
- * Slots: icon, title, default (message).
- * Classes: .oc-alert-dialog--confirm, .oc-alert-dialog-close, .oc-alert-dialog-form, .oc-alert-dialog-typed,
- * .oc-alert-dialog-confirm, .oc-alert-dialog-discard
- */
-import { ref } from 'vue'
-import { useDialog } from '../composables/useDialog'
-import { useUid } from '../composables/useUid'
-
-const props = withDefaults(
-  defineProps<{
-    type?: 'success' | 'error' | 'warning' | 'info' | 'question'
-    title?: string
-    message?: string
-    confirmLabel?: string
-    cancelLabel?: string
-    discardLabel?: string
-    confirmWord?: string
-    closeLabel?: string
-  }>(),
-  { type: 'error', confirmLabel: 'Confirm', cancelLabel: 'Cancel', closeLabel: 'Close' },
-)
-const emit = defineEmits<{ confirm: []; cancel: []; discard: [] }>()
-const open = defineModel<boolean>('open', { default: false })
-const el = ref<HTMLDialogElement | null>(null)
-const { onClose } = useDialog(open, el)
-const titleId = useUid('oc-confirm-dialog-title')
-const textId = `${titleId}-text`
-const glyphs = { success: '✓', error: '×', warning: '!', info: 'i', question: '?' } as const
-
-// Every action emits its event, then closes through the model (Vue stays the source of truth).
-function done(event: 'confirm' | 'cancel' | 'discard') {
-  if (event === 'confirm') emit('confirm')
-  else if (event === 'cancel') emit('cancel')
-  else emit('discard')
-  open.value = false
-}
-const destructive = () => props.type === 'error'
-</script>
-
-<template>
-  <dialog ref="el" class="oc-modal" closedby="any" :aria-labelledby="titleId" :aria-describedby="textId" @close="onClose">
-    <div :class="['oc-modal-content', 'oc-alert-dialog', `oc-alert-dialog--${type}`, 'oc-alert-dialog--confirm']">
-      <button class="oc-alert-dialog-close" type="button" :aria-label="closeLabel" @click="done('cancel')">×</button>
-      <span class="oc-alert-dialog-icon" aria-hidden="true"><slot name="icon">{{ glyphs[type] }}</slot></span>
-      <h2 :id="titleId" class="oc-modal-title"><slot name="title">{{ title }}</slot></h2>
-      <form class="oc-alert-dialog-form" @submit.prevent="done('confirm')">
-        <div :id="textId" class="oc-modal-body"><slot>{{ message }}</slot></div>
-        <label v-if="confirmWord" class="oc-alert-dialog-typed">
-          <span>Type <code>{{ confirmWord }}</code> to confirm</span>
-          <input class="oc-input" name="confirm" :pattern="confirmWord" required autocomplete="off" />
-        </label>
-        <div class="oc-modal-footer">
-          <button v-if="discardLabel" class="oc-btn oc-btn--ghost oc-alert-dialog-discard" type="button" @click="done('discard')">{{ discardLabel }}</button>
-          <button class="oc-btn oc-btn--outline" type="button" @click="done('cancel')">{{ cancelLabel }}</button>
-          <button :class="['oc-btn', destructive() && 'oc-btn--destructive', 'oc-alert-dialog-confirm']" type="submit" value="confirm">{{ confirmLabel }}</button>
-        </div>
-      </form>
-    </div>
-  </dialog>
-</template>
+<!-- File: packages/vue/src/components/OcConfirmDialog.vue | Map: dialog.oc-modal -> confirm content (close X, icon ring, title) -> form (message, typed field, footer: discard, cancel, confirm) -->
+<script setup lang="ts">
+/**
+ * Confirm variant of the alert dialog. v-model:open. Emits `confirm`, `cancel`, `discard` (all close the dialog).
+ * With `confirmWord` the browser blocks the submit until the typed value matches (pattern + required).
+ * Slots: icon, title, default (message).
+ * Classes: .oc-alert-dialog--confirm, .oc-alert-dialog-close, .oc-alert-dialog-form, .oc-alert-dialog-typed,
+ * .oc-alert-dialog-confirm, .oc-alert-dialog-discard
+ */
+import { ref } from 'vue'
+import { useDialog } from '../composables/useDialog'
+import { useUid } from '../composables/useUid'
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'success' | 'error' | 'warning' | 'info' | 'question'
+    title?: string
+    message?: string
+    confirmLabel?: string
+    cancelLabel?: string
+    discardLabel?: string
+    confirmWord?: string
+    closeLabel?: string
+  }>(),
+  { type: 'error', confirmLabel: 'Confirm', cancelLabel: 'Cancel', closeLabel: 'Close' },
+)
+const emit = defineEmits<{ confirm: []; cancel: []; discard: [] }>()
+const open = defineModel<boolean>('open', { default: false })
+const el = ref<HTMLDialogElement | null>(null)
+const { onClose } = useDialog(open, el)
+const titleId = useUid('oc-confirm-dialog-title')
+const textId = `${titleId}-text`
+const glyphs = { success: '✓', error: '×', warning: '!', info: 'i', question: '?' } as const
+
+// Every action emits its event, then closes through the model (Vue stays the source of truth).
+function done(event: 'confirm' | 'cancel' | 'discard') {
+  if (event === 'confirm') emit('confirm')
+  else if (event === 'cancel') emit('cancel')
+  else emit('discard')
+  open.value = false
+}
+const destructive = () => props.type === 'error'
+</script>
+
+<template>
+  <dialog ref="el" class="oc-modal" closedby="any" :aria-labelledby="titleId" :aria-describedby="textId" @close="onClose">
+    <div :class="['oc-modal-content', 'oc-alert-dialog', `oc-alert-dialog--${type}`, 'oc-alert-dialog--confirm']">
+      <button class="oc-alert-dialog-close" type="button" :aria-label="closeLabel" @click="done('cancel')">×</button>
+      <span class="oc-alert-dialog-icon" aria-hidden="true"><slot name="icon">{{ glyphs[type] }}</slot></span>
+      <h2 :id="titleId" class="oc-modal-title"><slot name="title">{{ title }}</slot></h2>
+      <form class="oc-alert-dialog-form" @submit.prevent="done('confirm')">
+        <div :id="textId" class="oc-modal-body"><slot>{{ message }}</slot></div>
+        <label v-if="confirmWord" class="oc-alert-dialog-typed">
+          <span>Type <code>{{ confirmWord }}</code> to confirm</span>
+          <input class="oc-input" name="confirm" :pattern="confirmWord" required autocomplete="off" />
+        </label>
+        <div class="oc-modal-footer">
+          <button v-if="discardLabel" class="oc-btn oc-btn--ghost oc-alert-dialog-discard" type="button" @click="done('discard')">{{ discardLabel }}</button>
+          <button class="oc-btn oc-btn--outline" type="button" @click="done('cancel')">{{ cancelLabel }}</button>
+          <button :class="['oc-btn', destructive() && 'oc-btn--destructive', 'oc-alert-dialog-confirm']" type="submit" value="confirm">{{ confirmLabel }}</button>
+        </div>
+      </form>
+    </div>
+  </dialog>
+</template>