Skip to main content

Checklist

Source@dopt/vue

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​

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​

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;