@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 |