OcStatusIndicators component

Description

The OcStatusIndicators component represents the status of a resource.

Accessibility

Indicators should be described via the accessibleDescription if they serve a purpose other than decoration.

Examples

Default

The most basic use case involves a resource and a given list of indicators. The indicators with kind icon have a handler function that is called when the user clicks on it.

<template>
  <oc-status-indicators
    :resource="{ id: '1' }"
    :indicators="[
      {
        id: '1',
        icon: 'cloud',
        label: 'This resource is synced in your cloud.',
        accessibleDescription: 'This resource is synced in your cloud.',
        handler: cloudHandler,
        kind: 'icon'
      },
      {
        id: '2',
        icon: 'user',
        label: 'This resource has been shared.',
        accessibleDescription: 'This resource has been shared.',
        handler: shareHandler,
        kind: 'icon'
      },
      {
        id: '3',
        label: 'Active',
        accessibleDescription: 'This resource is active.',
        kind: 'tag',
        class: '!bg-green-200 !text-green-800'
      }
    ]"
  />
  <div class="mt-4">Cloud indicator clicked: {{ cloudIndicatorClicked }}</div>
  <div>Share indicator clicked: {{ shareIndicatorClicked }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const cloudIndicatorClicked = ref(false)
const shareIndicatorClicked = ref(false)

const cloudHandler = () => {
  cloudIndicatorClicked.value = true
  // handle indicator click...
}

const shareHandler = () => {
  shareIndicatorClicked.value = true
  // handle indicator click...
}
</script>

Disabled handler

The handler can be disabled by setting disable-handler to true.

<oc-status-indicators
	:resource="{ id: '1' }"
	:indicators="[
		{
			id: '1',
			icon: 'cloud',
			label: 'This resource is synced in your cloud.',
			accessibleDescription: 'This resource is synced in your cloud.'
		}
	]"
	:disable-handler="true"
/>

Properties

Emits

Slots