@dpa-id-components/dpa-event-item NPM

@dpa-id-components/dpa-event-item

DpaEventItem Vue 2.x domain sepecific for Events (i.e. topic and event items in dpa-Agenda) component based on the dpa Design Kit

Installation

yarn add @dpa-id-components/dpa-event-item

Usage

<!-- SomeComponent.vue using DpaEventItem -->
<template>
  <div ref="container">
    <dpa-event-item v-bind="eventProps" />
  </div>
</template>

<script>
  export default {
    data() {
      width: 0,
      resizeObserver: undefined,
      eventProps: {
        date: "27. September",
        dateDetail: "Ganztägig",
        title:
          "Auftakt des Kapitalanlegermusterverfahrens am OLG Stuttgart gegen die VW-Holding Porsche SE im Zusammenhang mit dem Dieselskandal",
        location: "Berlin",
        noticeType: "event",
        actionType: "favorite",
        comments: "10 Inhalte geplant",
      }
    },
  }
</script>

Demo

View a demo of <dpa-event-item> on Storybook

API

Props

Name	Type	Required	Description
`title`	`String`	`true`	The title of the event or topic
`date`	`String`	`true`	The formatted date of the event or topic
`dateDetail`	`String`	`false`	Additional date information (e.g. time)
`noticeType`	`string`	`false`	Either `"event"` or `"topic"`
`comments`	`String`	`false`	Supplementary text information (e.g. content)
`size`	`String`	`false`	Size variant; either `small`, `medium`, `large`
`view`	`String`	`false`	Which view variant should be used, `compact` or `standard`
`top`	`Boolean`	`false`	If the event item should displayed as "top entry"
`description`	`String`	`false`	The teaser text that should be displayed. Only applies to `standard` view.
`truncateTitle`	`Boolean`	`false`	Applies a `line-clamp` of two rows to the event's `title` field.

Slots

Name	Description
`actions`	slot for a `ui-menu` activator button for further actions (e.g. copy, share)
`addFavoriteAction`	slot for a `ui-tooltip` incl. activator button for add to favorite action
`filters`	slot for a `DpaFilterBadge` components
`planningItems`	slot for a `DpaPlanningItem` components