BugReport

Tokens

SCSS Variable

Value

$modal-color

--bds-brand-primary-color

Properties

export interface BugReportProps extends ModalProps, TooltipProps {
  // handles modal view
  modelValue: boolean
  getUserData?: boolean;
  showTooltip?: boolean;
}

Playground

WARNING

This components needs to have vue-i18n installed in your application

Dev Notes

This component uses Modal under the hood. Therefore its slots are also available for BugReport. Additionally, we introduced a formElements slot.

Slots

Slot	PropBinds	Default	Type	Notes
title	-	t('bugReport.title')	string	Slot for the title of the modal
default	-	t('bugReport.description')	string	Slot for the description of the modal
formElements	bugReport, userData	TextArea, TextInput	string, { mail: string, name: string }	Slot for the form elements of the modal.
actions	submit, userData, bugReport	AppButton	function (that emits submit), { mail: string, name: string }, string	Slot for the actions of the modal.

Example Usage

<script setup lang="ts">
const pg: BugReportProps = reactive({
  modelValue: false,
  title: 'Modal title',
  closeOnClick: true,
  teleportTo: '#the-app-wrapper',
  getUserData: true
});

const handleClick = ({ bugReport, userData }:
  { bugReport: string, userData: { mail: string, name: string }}) => {

  // Some API Call logic

  pg.modelValue = false;
};
</script>

<template>
  <BugReport
    v-bind="pg" v-model="pg.modelValue" @submit="(bugReport, userData)
      => handleClick({bugReport, userData})">
      <template #title>
        <Heading :level="3">{{ someDynamicTitle }}</Heading>
      </template>
      <template #actions="{ bugReport, userData, submit }">
        <AppButton :text="'Send'" @click="submit" />
        <AppButton :text="'Cancel'" secondary @click="pg.modelValue = false" />
      </template>
    </BugReport>
  </template>

In this example, the title slot is used to set the title of the modal, and the actions slot is used to set the actions of the modal. The submit function is passed to the actions slot, which can be used to submit the form data. You can also use the bugReport and userData slot props from the actions slot to pass those directly to the event handler of your defined action (i.e. @click="eventHandler(bugReport, userData)" of AppButton)