Returnless UI

Data list ​

Data lists are used to display a collection of items in a consistent format. They are used to display a list of items that can be interacted with, such as a list of products, or a list of users.

Props
sortable?:
boolean
Defaults to false
Events
sort:
[string[]]

Usage ​

  • Shipped
    Failed
    In progress
  • Shipped
    Disabled
js
<script lang="ts" setup>
import {
  ActionList,
  ActionListBody,
  ActionListItem,
  ActionListSection,
  ActionListTrigger,
  Badge,
  Button,
  ButtonGroup,
  ButtonIcon,
  DataList, 
  DataListContent, 
  DataListItem,
  DataListItemLine,
  Link,
  StatusIndicator,
} from '@returnless/focus-ui';  
import { EllipsisHorizontalIcon } from '@heroicons/vue/16/solid'; 
</script>

<template>
  <DataList>
    <DataListItem>
      <DataListContent>
        <DataListItemLine>
          <Link href="#">Item 1</Link>
        </DataListItemLine>
        <DataListItemLine>
          <ButtonGroup>
            <Badge color="red">Shipped</Badge>
            <Badge color="green">Failed</Badge>
            <Badge color="blue">In progress</Badge>
          </ButtonGroup>
        </DataListItemLine>
      </DataListContent>
      <ActionList alignment="end">
        <ActionListTrigger>
          <Button icon-only variant="ghost" size="small">
            <ButtonIcon :name="EllipsisHorizontalIcon"></ButtonIcon>
          </Button>
        </ActionListTrigger>
        <ActionListBody>
          <ActionListSection>
            <ActionListItem :icon="PencilIcon" as="button">
              Set as default
            </ActionListItem>
          </ActionListSection>
          <ActionListSection>
            <ActionListItem :icon="PencilIcon" as="button">
              Edit
            </ActionListItem>
            <ActionListItem :icon="TrashIcon" as="button" variant="destructive">
              Delete
            </ActionListItem>
          </ActionListSection>
        </ActionListBody>
      </ActionList>
    </DataListItem>
    <DataListItem>
      <DataListContent>
        <DataListItemLine>
          <ButtonGroup>
            <Link href="#">Item 2</Link>
          </ButtonGroup>
        </DataListItemLine>
        <DataListItemLine>
          <ButtonGroup>
            <Badge color="red">Shipped</Badge>
          </ButtonGroup>
        </DataListItemLine>
      </DataListContent>
      <DataListContent align="right">
        <StatusIndicator color="red">Disabled</StatusIndicator>
      </DataListContent>
      <ActionList alignment="end">
        <ActionListTrigger>
          <Button icon-only variant="ghost" size="small">
            <ButtonIcon :name="EllipsisHorizontalIcon"></ButtonIcon>
          </Button>
        </ActionListTrigger>
        <ActionListBody>
          <ActionListSection>
            <ActionListItem :icon="PencilIcon" as="button">
              Set as default
            </ActionListItem>
          </ActionListSection>
          <ActionListSection>
            <ActionListItem :icon="PencilIcon" as="button">
              Edit
            </ActionListItem>
            <ActionListItem :icon="TrashIcon" as="button" variant="destructive">
              Delete
            </ActionListItem>
          </ActionListSection>
        </ActionListBody>
      </ActionList>
    </DataListItem>
  </DataList>
</template>

Sortable data list ​

  • Item 1
  • Item 2 
[]
js
<script lang="ts" setup>
import {
  DataList,
  DataListContent,
  DataListItem,
  DataListItemLine,
} from '@returnless/focus-ui';   

const sortedItems = ref<string[]>([]);
</script>

<template>
  <DataList sortable @sort="v => sortedItems = v">
    <DataListItem id="1">
      <DataListContent>
        <DataListItemLine>
          Item 1
        </DataListItemLine>
      </DataListContent>
    </DataListItem>
    <DataListItem id="2">
      <DataListContent>
        <DataListItemLine>
          Item 2
        </DataListItemLine>
      </DataListContent>
    </DataListItem>
  </DataList>
</template>