Checklist
Overview
The checklist component is powered by a checklist block and is great way to get your users up and running in your product.
A checklist block is comprised of items, which are the set of steps in the checklist.
The checklist component exposes two composables to easily build checklists.
Composables
With our Vue SDK, you can use checklists and checklist items headlessly by importing the useChecklist
or useChecklistItem
composable from @dopt/vue
.
useChecklist
- useChecklist(
id
: string): Checklist
A Vue composable for managing a checklist's state and content.
<script>
import { useChecklist } from '@dopt/vue';
import RichText from '@dopt/html-rich-text';
const print = (items) => items.map((item) => item.id).join(' ');
const {
id,
title,
body,
items,
active,
completed,
dismissed,
complete,
dismiss,
filter,
count,
size,
} = useChecklist('onboarding-checklist.checklist-component');
</script>
<template>
<div>
<div id="states">
<div>checklist.active: {{ active }}</div>
<div>checklist.completed: {{ completed }}</div>
<div>checklist.dismissed: {{ dismissed }}</div>
</div>
<div id="actions">
<button v-on:click="() => complete()">Complete</button>
<button v-on:click="() => dismiss()">Dismiss</button>
</div>
<div id="content">
<div>checklist.title: {{ title }}</div>
<div>
checklist.body: <div v-html="RichText({ content: body })"></div>
</div>
</div>
<div id="children">checklist.items: {{ print(items) }}</div>
<div id="filtering">
<div id="f-completed">{{ print(filter('completed')) }}</div>
<div id="f-not-completed">{{ print(filter('not-completed')) }}</div>
<div id="f-skipped">{{ print(filter('skipped')) }}</div>
<div id="f-not-skipped">{{ print(filter('not-skipped')) }}</div>
<div id="f-active">{{ print(filter('active')) }}</div>
<div id="f-not-active">{{ print(filter('not-active')) }}</div>
<div id="f-done">{{ print(filter('done')) }}</div>
<div id="f-not-done">{{ print(filter('not-done')) }}</div>
</div>
<div id="counting">
<div id="c-completed">{{ count('completed') }}</div>
<div id="c-not-completed">{{ count('not-completed') }}</div>
<div id="c-skipped">{{ count('skipped') }}</div>
<div id="c-not-skipped">{{ count('not-skipped') }}</div>
<div id="c-active">{{ count('active') }}</div>
<div id="c-not-active">{{ count('not-active') }}</div>
<div id="c-done">{{ count('done') }}</div>
<div id="c-not-done">{{ count('not-done') }}</div>
</div>
<div id="metadata">
<div>checklist.size: {{ size }}</div>
</div>
</div>
</template>
useChecklistItem
- useChecklistItem(
id
: string): ChecklistItem
A Vue composable for managing a checklist item's state and content.
<script>
import { useChecklistItem } from '@dopt/vue';
import RichText from '@dopt/html-rich-text';
const {
id,
index,
title,
body,
completeLabel,
done,
active,
skipped,
completed,
complete,
skip,
} = useChecklistItem('onboarding-checklist.item-1');
</script>
<template>
<div>
<div id="states">
<div>checklistItem.active: {{ active }}</div>
<div>checklistItem.skipped: {{ skipped }}</div>
<div>checklistItem.completed: {{ completed }}</div>
<div>checklistItem.done: {{ done }}</div>
</div>
<div id="actions">
<button v-on:click="() => complete()">{{ completeLabel }}</button>
<button v-on:click="() => skip()">Skip</button>
</div>
<div id="content">
<div>checklistItem.title: {{ title }}</div>
<div>
checklistItem.body: <div v-html="RichText({ content: body })"></div>
</div>
<div>checklistItem.completeLabel: {{ completeLabel }}</div>
</div>
<div id="metadata">
<div>checklistItem.index: {{ index }}</div>
</div>
</div>
</template>
Types
Checklist
A stateful container for checklist items.
interface Checklist {
id: Ref<string>;
items: () => ChecklistItem[];
title: Ref<string | null | undefined>;
body: Ref<Children | null | undefined>;
active: Ref<boolean>;
completed: Ref<boolean>;
dismissed: Ref<boolean>;
field: <V>(name: string) => undefined | null | V;
complete: () => void;
dismiss: () => void;
size: Ref<number>;
filter(on: FilterableField): ChecklistItem[];
count(where: CountableField): number;
}
ChecklistItem
A child of the Checklist. Includes state accessors and methods for updating state along with content configured in Dopt.
interface ChecklistItem {
id: Ref<string>;
index: Ref<number | null | undefined>;
title: Ref<string | null | undefined>;
body: Ref<Children | null | undefined>;
completeLabel: Ref<string | null | undefined>;
done: Ref<boolean>;
active: Ref<boolean>;
skipped: Ref<boolean>;
completed: Ref<boolean>;
field: <V>(name: string) => undefined | null | V;
complete: () => void;
skip: () => void;
}
FilterableField
type FilterableField =
| 'completed'
| 'not-completed'
| 'skipped'
| 'not-skipped'
| 'active'
| 'not-active'
| 'done'
| 'not-done';
CountableField
type CountableField = FilterableField;