@vuecs/list

@vuecs/list

The compound list of vuecs — a stateful <VCList> root plus part components that read from it, with built-in selection, busy/empty states, and an externalizable state container.

✨ What's inside

• 🧩 Five-part compound — <VCList> (state + selection coordinator), <VCListBody>, <VCListItem>, <VCListEmpty>, <VCListLoading>. Header / footer / per-row chrome stay your markup, styled via slot-prop class strings.
• ☑️ Built-in selection — v-model:selection, single or multi, full ARIA-listbox semantics with keyboard range selection.
• 🏪 defineList() factory — Pinia-style external state container; share one list state between the component, a toolbar, and a URL sync without prop-drilling.
• 🪝 useList() / useListItem() — strict injectors for building custom parts that participate in the compound.
• 🔤 Type-safe item slots — <VCList> / <VCListItem> are generic over the row type, so <VCListItem :data="user">'s #default="{ data }" infers data as your entity type with no cast.
• 🎨 Density variants — compact / normal / spacious, plus disabled / active / selected item states across all shipping themes.

📦 Installation

npm install @vuecs/list

⚡ Usage

<VCList :data="users" :busy="loading" v-model:selection="selected" selection-mode="multi">
    <template #default="{ classes }">
        <header :class="classes.header">Users</header>
        <VCListBody>
            <VCListItem v-for="user in users" :key="user.id" :data="user" selectable>
                <template #default="{ data, classes }">
                    <!-- `data` infers your row type from `:data` -->
                    <span :class="classes.text">{{ data.name }}</span>
                    <span :class="classes.actions">
                        <VCButton size="sm" variant="ghost">Edit</VCButton>
                    </span>
                </template>
            </VCListItem>
        </VCListBody>
        <VCListEmpty>No users yet.</VCListEmpty>
        <VCListLoading overlay>Refreshing…</VCListLoading>
    </template>
</VCList>

📚 Documentation

Full reference, selection semantics, and defineList() recipes: vuecs.dev/components/list

License

Made with 💚

Published under Apache 2.0 License.