@birdycom/omniaui-vue 0.12.4 → 0.12.6

package/src/components/OcPrice.vue

@@ -0,0 +1,30 @@
+<!-- File: packages/vue/src/components/OcPrice.vue | Map: props -> formatted amounts -> main line, note, alternative -->
+<script setup lang="ts">
+/** A price with old price, discount, VAT note and the other amount (same markup as snippets/price.html). */
+const props = withDefaults(defineProps<{
+  amount: number | string
+  old?: number | string
+  discount?: string
+  note?: string
+  alt?: string
+  currency?: string
+  locale?: string
+  size?: 'sm' | 'md' | 'lg'
+  sale?: boolean
+  inline?: boolean
+  end?: boolean
+}>(), { currency: 'EUR', locale: 'nl-BE', size: 'md' })
+const format = (v: number | string) => (typeof v === 'number' ? new Intl.NumberFormat(props.locale, { style: 'currency', currency: props.currency }).format(v) : v)
+</script>
+
+<template>
+  <div :class="['oc-price', size !== 'md' && `oc-price--${size}`, sale && 'oc-price--sale', inline && 'oc-price--inline', end && 'oc-price--end']">
+    <div class="oc-price__main">
+      <span class="oc-price__amount">{{ format(amount) }}</span>
+      <s v-if="old != null" class="oc-price__old">{{ format(old) }}</s>
+      <span v-if="discount" class="oc-badge oc-badge--destructive">{{ discount }}</span>
+    </div>
+    <span v-if="note" class="oc-price__note">{{ note }}</span>
+    <span v-if="alt" class="oc-price__alt">{{ alt }}</span>
+  </div>
+</template>

package/src/components/OcProse.vue

@@ -24,7 +24,7 @@ withDefaults(defineProps<{ size?: 'compact' | 'sm' | 'md' | 'lg'; full?: boolean
       </ul>
       <figure>
         <div class="oc-media-art oc-media-art--6" role="img" aria-label="Kitchen with oak fronts and a light stone worktop"></div>
-        <figcaption>Villa Dewitte: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
+        <figcaption>Project 1: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
       </figure>
       <h3>From design to installation</h3>
       <ol>
@@ -35,7 +35,7 @@ withDefaults(defineProps<{ size?: 'compact' | 'sm' | 'md' | 'lg'; full?: boolean
       </ol>
       <blockquote>
         <p>The planning was clear from day one. We always knew who was coming and when, and the kitchen was ready a week early.</p>
-        <footer>— Ann Dewitte, client in Ghent</footer>
+        <footer>— Customer 8, client in Ghent</footer>
       </blockquote>
       <h2>Worktop materials compared</h2>
       <table>
@@ -49,7 +49,7 @@ withDefaults(defineProps<{ size?: 'compact' | 'sm' | 'md' | 'lg'; full?: boolean
       </table>
       <h3>Sharing your floor plan</h3>
       <p>Upload a PDF or a photo in the client portal, or send it by e-mail. Press <kbd>Ctrl</kbd> + <kbd>V</kbd> in the chat to paste a screenshot. Files are stored as <code>project-id/plans/</code> and only your project team can see them.</p>
-      <pre><code>{{ 'Project:   2026-114 Villa Dewitte\nRoom:      Kitchen, ground floor\nWall A:    412 cm (window at 160 cm)\nWall B:    298 cm (door at the left)' }}</code></pre>
+      <pre><code>{{ 'Project:   2026-114 Project 1\nRoom:      Kitchen, ground floor\nWall A:    412 cm (window at 160 cm)\nWall B:    298 cm (door at the left)' }}</code></pre>
       <hr />
       <p><small>Lead times are an estimate. <mark>Natural stone</mark> can take two weeks longer in summer.</small></p>
     </slot>

package/src/components/OcQuantity.vue

@@ -0,0 +1,21 @@
+<!-- File: packages/vue/src/components/OcQuantity.vue | Map: v-model number -> minus / input / plus within min, max, step -->
+<script setup lang="ts">
+/** Minus, number and plus in one frame (same markup as snippets/quantity.html). v-model is the number. */
+import { stepQuantity } from '../../../ui/src/form-extras.js'
+
+const props = withDefaults(defineProps<{ min?: number; max?: number; step?: number; size?: 'sm' | 'md'; label?: string; name?: string; id?: string; disabled?: boolean }>(), { min: 0, step: 1, size: 'md', label: 'Quantity' })
+const model = defineModel<number>({ default: 1 })
+const move = (direction: -1 | 1) => { model.value = stepQuantity(model.value, direction, { min: props.min, max: props.max ?? Infinity, step: props.step }) }
+</script>
+
+<template>
+  <div :class="['oc-quantity', size === 'sm' && 'oc-quantity--sm']">
+    <button class="oc-quantity__step" type="button" :aria-label="`Decrease ${label.toLowerCase()}`" :disabled="disabled || model <= min" @click="move(-1)">
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13H5v-2h14z" /></svg>
+    </button>
+    <input :id="id" v-model.number="model" class="oc-quantity__input" type="number" inputmode="numeric" :name="name" :min="min" :max="max" :step="step" :aria-label="label" :disabled="disabled">
+    <button class="oc-quantity__step" type="button" :aria-label="`Increase ${label.toLowerCase()}`" :disabled="disabled || (max != null && model >= max)" @click="move(1)">
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" /></svg>
+    </button>
+  </div>
+</template>

package/src/components/OcRating.vue

@@ -0,0 +1,17 @@
+<!-- File: packages/vue/src/components/OcRating.vue | Map: props -> clamped score -> star bar -->
+<script setup lang="ts">
+/** Stars of a score (same markup as snippets/rating.html): halves and decimals, any number of stars. */
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{ value: number; max?: number; size?: 'sm' | 'md' | 'lg'; label?: string }>(), { max: 5, size: 'md' })
+const score = computed(() => Math.max(0, Math.min(props.max, props.value)))
+</script>
+
+<template>
+  <span
+    :class="['oc-rating', size !== 'md' && `oc-rating--${size}`]"
+    :style="{ '--oc-rating': String(score), ...(max !== 5 ? { '--oc-rating-max': String(max) } : {}) }"
+    role="img"
+    :aria-label="label ?? `${score} out of ${max}`"
+  ></span>
+</template>

package/src/components/OcRatingInput.vue

@@ -0,0 +1,17 @@
+<!-- File: packages/vue/src/components/OcRatingInput.vue | Map: v-model (1–5) -> fieldset with five star radios -->
+<script setup lang="ts">
+/** Five radio buttons drawn as stars (same markup as snippets/rating.html); v-model is 0 (none) to 5. */
+import { useUid } from '../composables/useUid'
+
+const props = withDefaults(defineProps<{ name?: string; legend?: string; size?: 'sm' | 'md' | 'lg'; disabled?: boolean }>(), { legend: 'Rating', size: 'md' })
+const model = defineModel<number>({ default: 0 })
+const group = props.name ?? useUid('oc-rating')
+const text = (n: number) => (n === 1 ? '1 star' : `${n} stars`)
+</script>
+
+<template>
+  <fieldset :class="['oc-rating-input', size !== 'md' && `oc-rating-input--${size}`]" :disabled="disabled">
+    <legend>{{ legend }}</legend>
+    <label v-for="n in 5" :key="n"><input v-model="model" type="radio" :name="group" :value="n"><span>{{ text(n) }}</span></label>
+  </fieldset>
+</template>

package/src/components/OcRibbon.vue

@@ -0,0 +1,9 @@
+<!-- File: packages/vue/src/components/OcRibbon.vue | Map: corner, tone, size -> classes -> band with the slot -->
+<script setup lang="ts">
+/** Diagonal band across a corner of its parent (same markup as snippets/ribbon.html). Default slot = the text. */
+withDefaults(defineProps<{ corner?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'; tone?: 'primary' | 'success' | 'warning' | 'destructive' | 'muted'; size?: 'sm' | 'md' | 'lg' }>(), { corner: 'top-end', tone: 'primary', size: 'md' })
+</script>
+
+<template>
+  <span :class="['oc-ribbon', corner !== 'top-end' && `oc-ribbon--${corner}`, tone !== 'primary' && `oc-ribbon--${tone}`, size !== 'md' && `oc-ribbon--${size}`]"><slot /></span>
+</template>

package/src/components/OcSpecList.vue

@@ -0,0 +1,17 @@
+<!-- File: packages/vue/src/components/OcSpecList.vue | Map: groups -> group title -> rows (label, value, note) -->
+<script setup lang="ts">
+/** Technical specifications in named groups (same markup as snippets/spec-list.html). */
+export interface SpecGroup { title: string; rows: { label: string; value: string; note?: string }[] }
+defineProps<{ groups: SpecGroup[]; stack?: boolean }>()
+</script>
+
+<template>
+  <div :class="['oc-spec-list', stack && 'oc-spec-list--stack']">
+    <section v-for="(group, g) in groups" :key="g" class="oc-spec-group">
+      <h3 class="oc-spec-group__title">{{ group.title }}</h3>
+      <dl class="oc-spec-group__rows">
+        <div v-for="(row, r) in group.rows" :key="r" class="oc-spec-row"><dt>{{ row.label }}</dt><dd>{{ row.value }}<small v-if="row.note">{{ row.note }}</small></dd></div>
+      </dl>
+    </section>
+  </div>
+</template>

package/src/components/OcStock.vue

@@ -0,0 +1,13 @@
+<!-- File: packages/vue/src/components/OcStock.vue | Map: level -> default text -> dot, text and note -->
+<script setup lang="ts">
+/** Stock status with a colored dot (same markup as snippets/stock.html). Default slot = the text. */
+const props = withDefaults(defineProps<{ level?: 'ok' | 'low' | 'out' | 'order'; badge?: boolean; note?: string }>(), { level: 'ok' })
+const TEXT = { ok: 'In stock', low: 'Low stock', out: 'Out of stock', order: 'On order' } as const
+</script>
+
+<template>
+  <span :class="['oc-stock', badge && 'oc-stock--badge']" :data-level="props.level === 'ok' ? undefined : props.level">
+    <slot>{{ TEXT[props.level] }}</slot>
+    <span v-if="note" class="oc-stock__note"> · {{ note }}</span>
+  </span>
+</template>

package/src/components/OcUser.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-/** Avatar with name and e-mail (truncating). `initials` or `src` fill the avatar; slot `avatar` replaces it. */
-defineProps<{
+/** Avatar with name and e-mail (truncating). `initials` (default: from `name`) or `src` fill the avatar; slot `avatar` replaces it. */
+import { computed } from 'vue'
+
+const props = defineProps<{
   name: string
   email?: string
   initials?: string
   src?: string
   avatarSize?: 'sm' | 'md' | 'lg' | 'xl'
 }>()
+
+const shownInitials = computed(() => props.initials ?? props.name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join(''))
 </script>
 
 <template>
@@ -14,7 +18,7 @@ defineProps<{
     <slot name="avatar">
       <span :class="['oc-avatar', avatarSize && avatarSize !== 'md' && `oc-avatar--${avatarSize}`]">
         <img v-if="src" :src="src" alt="" />
-        <template v-else>{{ initials }}</template>
+        <template v-else>{{ shownInitials }}</template>
       </span>
     </slot>
     <span class="oc-user-text">

package/src/index.ts

@@ -15,8 +15,10 @@ import OcAttachmentList from './components/OcAttachmentList.vue'
 import OcAttachmentThumb from './components/OcAttachmentThumb.vue'
 import OcAvatar from './components/OcAvatar.vue'
 import OcAvatarGroup from './components/OcAvatarGroup.vue'
+import OcAvatarPicker from './components/OcAvatarPicker.vue'
 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 OcBreadcrumb from './components/OcBreadcrumb.vue'
 import OcBrowserFrame from './components/OcBrowserFrame.vue'
@@ -33,13 +35,14 @@ import OcChipFilter from './components/OcChipFilter.vue'
 import OcCollapsible from './components/OcCollapsible.vue'
 import OcColorField from './components/OcColorField.vue'
 import OcColorSelect from './components/OcColorSelect.vue'
-import OcColumnMenu from './components/OcColumnMenu.vue'
 import OcCommand from './components/OcCommand.vue'
 import OcConfirmDialog from './components/OcConfirmDialog.vue'
 import OcCookieConsent from './components/OcCookieConsent.vue'
 import OcCopyField from './components/OcCopyField.vue'
 import OcCounter from './components/OcCounter.vue'
 import OcDataTable from './components/OcDataTable.vue'
+import OcDataTableName from './components/OcDataTableName.vue'
+import OcDateField from './components/OcDateField.vue'
 import OcDecimalInput from './components/OcDecimalInput.vue'
 import OcDefinitionList from './components/OcDefinitionList.vue'
 import OcDocViewer from './components/OcDocViewer.vue'
@@ -55,7 +58,10 @@ 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 OcFormSection from './components/OcFormSection.vue'
+import OcGallery from './components/OcGallery.vue'
 import OcGlass from './components/OcGlass.vue'
+import OcGlassBar from './components/OcGlassBar.vue'
 import OcGlassPanel from './components/OcGlassPanel.vue'
 import OcGreeting from './components/OcGreeting.vue'
 import OcHeading from './components/OcHeading.vue'
@@ -71,6 +77,7 @@ import OcKbdGroup from './components/OcKbdGroup.vue'
 import OcLabel from './components/OcLabel.vue'
 import OcLanguageSelect from './components/OcLanguageSelect.vue'
 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 OcLinkRow from './components/OcLinkRow.vue'
@@ -83,7 +90,9 @@ import OcMediaThumb from './components/OcMediaThumb.vue'
 import OcMessage from './components/OcMessage.vue'
 import OcMessageList from './components/OcMessageList.vue'
 import OcMessageThread from './components/OcMessageThread.vue'
+import OcMeterRow from './components/OcMeterRow.vue'
 import OcModal from './components/OcModal.vue'
+import OcNameCard from './components/OcNameCard.vue'
 import OcNavmenu from './components/OcNavmenu.vue'
 import OcNavmenuList from './components/OcNavmenuList.vue'
 import OcNextTeaser from './components/OcNextTeaser.vue'
@@ -95,14 +104,19 @@ import OcPasswordInput from './components/OcPasswordInput.vue'
 import OcPasswordRequirements from './components/OcPasswordRequirements.vue'
 import OcPhoneInput from './components/OcPhoneInput.vue'
 import OcPopover from './components/OcPopover.vue'
+import OcPrice from './components/OcPrice.vue'
 import OcPriceCard from './components/OcPriceCard.vue'
 import OcProductMark from './components/OcProductMark.vue'
 import OcProgress from './components/OcProgress.vue'
 import OcProjectCard from './components/OcProjectCard.vue'
 import OcProse from './components/OcProse.vue'
+import OcQuantity from './components/OcQuantity.vue'
 import OcRadio from './components/OcRadio.vue'
 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 OcRibbon from './components/OcRibbon.vue'
 import OcScrollArea from './components/OcScrollArea.vue'
 import OcSegmented from './components/OcSegmented.vue'
 import OcSelect from './components/OcSelect.vue'
@@ -118,6 +132,7 @@ import OcSidebarSeparator from './components/OcSidebarSeparator.vue'
 import OcSkeleton from './components/OcSkeleton.vue'
 import OcSlider from './components/OcSlider.vue'
 import OcSortableRow from './components/OcSortableRow.vue'
+import OcSpecList from './components/OcSpecList.vue'
 import OcSpinner from './components/OcSpinner.vue'
 import OcStackCard from './components/OcStackCard.vue'
 import OcStackList from './components/OcStackList.vue'
@@ -125,6 +140,7 @@ 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 OcStock from './components/OcStock.vue'
 import OcSwitch from './components/OcSwitch.vue'
 import OcTable from './components/OcTable.vue'
 import OcTableActions from './components/OcTableActions.vue'
@@ -200,8 +216,10 @@ export {
   OcAttachmentThumb,
   OcAvatar,
   OcAvatarGroup,
+  OcAvatarPicker,
   OcBackLink,
   OcBadge,
+  OcBarcode,
   OcBarcodeInput,
   OcBreadcrumb,
   OcBrowserFrame,
@@ -218,13 +236,14 @@ export {
   OcCollapsible,
   OcColorField,
   OcColorSelect,
-  OcColumnMenu,
   OcCommand,
   OcConfirmDialog,
   OcCookieConsent,
   OcCopyField,
   OcCounter,
   OcDataTable,
+  OcDataTableName,
+  OcDateField,
   OcDecimalInput,
   OcDefinitionList,
   OcDocViewer,
@@ -240,7 +259,10 @@ export {
   OcFilterCounts,
   OcFlipCard,
   OcFormField,
+  OcFormSection,
+  OcGallery,
   OcGlass,
+  OcGlassBar,
   OcGlassPanel,
   OcGreeting,
   OcHeading,
@@ -256,6 +278,7 @@ export {
   OcLabel,
   OcLanguageSelect,
   OcLauncherCard,
+  OcLazyImage,
   OcLightbox,
   OcLinkArrow,
   OcLinkRow,
@@ -268,7 +291,9 @@ export {
   OcMessage,
   OcMessageList,
   OcMessageThread,
+  OcMeterRow,
   OcModal,
+  OcNameCard,
   OcNavmenu,
   OcNavmenuList,
   OcNextTeaser,
@@ -280,14 +305,19 @@ export {
   OcPasswordRequirements,
   OcPhoneInput,
   OcPopover,
+  OcPrice,
   OcPriceCard,
   OcProductMark,
   OcProgress,
   OcProjectCard,
   OcProse,
+  OcQuantity,
   OcRadio,
   OcRadioGroup,
+  OcRating,
+  OcRatingInput,
   OcRecoveryCodes,
+  OcRibbon,
   OcScrollArea,
   OcSegmented,
   OcSelect,
@@ -303,6 +333,7 @@ export {
   OcSkeleton,
   OcSlider,
   OcSortableRow,
+  OcSpecList,
   OcSpinner,
   OcStackCard,
   OcStackList,
@@ -310,6 +341,7 @@ export {
   OcStatus,
   OcStatusDot,
   OcStepper,
+  OcStock,
   OcSwitch,
   OcTable,
   OcTableActions,
@@ -380,11 +412,13 @@ export type { ChipFilterItem } from './components/OcChipFilter.vue'
 export type { ColorSelectItem } from './components/OcColorSelect.vue'
 export type { CommandItem } from './components/OcCommand.vue'
 export type { CookieCategory, ConsentChoice } from './components/OcCookieConsent.vue'
-export type { DataTableColumn, DataTableRow } from './components/OcDataTable.vue'
+export type { DataTableColumn, DataTableRow, DataTableTabs, DataTableColumnFilter } from './components/OcDataTable.vue'
 export type { DefinitionRow } from './components/OcDefinitionList.vue'
 export type { DocViewerItem } from './components/OcDocViewer.vue'
 export type { FactListRow } from './components/OcFactList.vue'
 export type { FilterCountsItem } from './components/OcFilterCounts.vue'
+export type { GalleryImage } from './components/OcGallery.vue'
+export type { GlassBarItem } from './components/OcGlassBar.vue'
 export type { LanguageSelectItem } from './components/OcLanguageSelect.vue'
 export type { MessageAttachment, MessageAction, MessageData } from './components/OcMessage.vue'
 export type { MessageListItem } from './components/OcMessageList.vue'
@@ -396,6 +430,7 @@ export type { PriceCardFeature, PriceCardPrice } from './components/OcPriceCard.
 export type { RadioOption } from './components/OcRadioGroup.vue'
 export type { SegmentedOption } from './components/OcSegmented.vue'
 export type { SelectOption } from './components/OcSelect.vue'
+export type { SpecGroup } from './components/OcSpecList.vue'
 export type { StackListItem } from './components/OcStackList.vue'
 export type { StepperStep } from './components/OcStepper.vue'
 export type { TableColumn, TableSort } from './components/OcTable.vue'
@@ -441,8 +476,10 @@ export const components: Record<string, Component> = {
   OcAttachmentThumb,
   OcAvatar,
   OcAvatarGroup,
+  OcAvatarPicker,
   OcBackLink,
   OcBadge,
+  OcBarcode,
   OcBarcodeInput,
   OcBreadcrumb,
   OcBrowserFrame,
@@ -459,13 +496,14 @@ export const components: Record<string, Component> = {
   OcCollapsible,
   OcColorField,
   OcColorSelect,
-  OcColumnMenu,
   OcCommand,
   OcConfirmDialog,
   OcCookieConsent,
   OcCopyField,
   OcCounter,
   OcDataTable,
+  OcDataTableName,
+  OcDateField,
   OcDecimalInput,
   OcDefinitionList,
   OcDocViewer,
@@ -481,7 +519,10 @@ export const components: Record<string, Component> = {
   OcFilterCounts,
   OcFlipCard,
   OcFormField,
+  OcFormSection,
+  OcGallery,
   OcGlass,
+  OcGlassBar,
   OcGlassPanel,
   OcGreeting,
   OcHeading,
@@ -497,6 +538,7 @@ export const components: Record<string, Component> = {
   OcLabel,
   OcLanguageSelect,
   OcLauncherCard,
+  OcLazyImage,
   OcLightbox,
   OcLinkArrow,
   OcLinkRow,
@@ -509,7 +551,9 @@ export const components: Record<string, Component> = {
   OcMessage,
   OcMessageList,
   OcMessageThread,
+  OcMeterRow,
   OcModal,
+  OcNameCard,
   OcNavmenu,
   OcNavmenuList,
   OcNextTeaser,
@@ -521,14 +565,19 @@ export const components: Record<string, Component> = {
   OcPasswordRequirements,
   OcPhoneInput,
   OcPopover,
+  OcPrice,
   OcPriceCard,
   OcProductMark,
   OcProgress,
   OcProjectCard,
   OcProse,
+  OcQuantity,
   OcRadio,
   OcRadioGroup,
+  OcRating,
+  OcRatingInput,
   OcRecoveryCodes,
+  OcRibbon,
   OcScrollArea,
   OcSegmented,
   OcSelect,
@@ -544,6 +593,7 @@ export const components: Record<string, Component> = {
   OcSkeleton,
   OcSlider,
   OcSortableRow,
+  OcSpecList,
   OcSpinner,
   OcStackCard,
   OcStackList,
@@ -551,6 +601,7 @@ export const components: Record<string, Component> = {
   OcStatus,
   OcStatusDot,
   OcStepper,
+  OcStock,
   OcSwitch,
   OcTable,
   OcTableActions,

package/src/components/OcColumnMenu.vue

@@ -1,50 +0,0 @@
-<!-- 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>