@bimetal/list-vue-components

@bimetal/list-vue-components

The default Vue 3 list / catalog for BIMETAL — a thin binding over the canonical @bimetal/list-headless controller. Every interaction decision (multi-select, keyboard + drag batch reorder, batch delete, in-place rename, undo, keyboard semantics) lives in the headless controller; this package owns only the DOM: normalising keyboard events and rendering the canonical .bm-list* markup with ARIA listbox roles.

Features

• Multi-select — click to select, Ctrl/Cmd-click to toggle, Shift-click for a contiguous range; aria-selected reflects the listbox state.
• Batch reorder — drag a row (or Ctrl/Cmd + arrow keys) to move the whole selection block; commits as ONE MoveItems (one undo).
• Batch delete & rename — delete the selection in one step; rename a single selected item with an in-place editor (double-click or the toolbar button).
• Undo & theming — one-click undo toast, light/dark token set from @bimetal/list-themes.

Usage

<script setup lang="ts">
import { List } from '@bimetal/list-vue-components';
import { createListStore, createList } from '@bimetal/list-data';
import '@bimetal/list-vue-components/styles';

const store = createListStore();
// …seed the list aggregate…
const LIST_ID = 'my-list';
</script>

<template>
  <List :store="store" :list-id="LIST_ID" title="Liste" />
</template>

License

Apache-2.0