Components

Component layout

/src/components/

  /listitems/
    # variations: ResourceListItem, ResourceSmallListItem, ResourceMinimalListItem
    # the pattern is: {Resource}{Description}ListItem

  /cards/
    # variations: ResourceCard, ResourcePreviewCard, ResourcePage

  /actions/:resource/:action # `:action` should map to the backend action but with CamelCase
  /actions/:resource/Menu.vue # the dropdown menu for the resource

  /ui/ # general-use components

Component types:

ListItems

ListItems can be found at src/components/listitems/..

• Should accept list item as props.item

Basic ..ListItem example

<template>
<v-list-item :to="to" >
  <template #prepend ></template>
  <v-list-item-title ></v-list-item-title >
  <v-list-item-subtitle ></v-list-item-subtitle >
  <template #append ></template>
</v-list-item>
</template>

<script setup >
import { useAccessors } from '@/composables/useAccessors';
import {computed} from 'vue'

const {getObjectPath} = useAccessors()

// emits:
const emit = defineEmits(['selected'])

// props:
const props = defineProps({
  item: { type: Object, required: true },
  // optional extras
  to: { type: String, required: false }
})

</script>

Props:

Common options that can be passed to a listitem: Although not a requirement, the following items can be added and we should expect consistent naming and behaviour

• to - a URL to which this should link

Cards

Cards can be found at src/components/cards/..

Card Variants

You can specify different variants of cards:

Card Types

• Card: The standard component used to view a resource (e.g., TaskCard)
• Page: A detailed component showing maximum information about a resource (e.g., TaskPage)
• Preview: A component used for previewing resource information, typically in popovers (e.g., TaskPreviewCard)

Required Props

Prop	Type	Description
modelValue	Object	The object passed to the card (required)

Common Props

Prop	Type	Description
resourceName	String	The resource identifier
objectId	Number	Used with resourceName to fetch complete object from backend
withClose	Boolean	Whether to display a close icon
withMenu	Boolean	Whether to display the ActionMenu for this resource

Example Card Component

Actions

UI