# Install

```
npm i @mate-vue/facet
```

# Import

```vue
<script setup>
import { MateFacet, MateFacetList } from '@mate-vue/facet';
</script>
```

# Variants

## Stacked (Default)

```vue
<template>
  <MateFacetList titleText="Name-Wert-Facette (Stacked)">
    <MateFacet keyText="Name">Max Mustermann</MateFacet>
    <MateFacet keyText="Straße">Hauptstraße 412</MateFacet>
    <MateFacet keyText="Postleitzahl">23456</MateFacet>
    <MateFacet keyText="Ort">Bautzen</MateFacet>
  </MateFacetList>
</template>
```

## Inline

```vue
<template>
  <MateFacetList titleText="Name-Wert-Facette (Inline)" theme="inline">
    <MateFacet keyText="Name">Max Mustermann</MateFacet>
    <MateFacet keyText="Telefon">+49 123 456789</MateFacet>
  </MateFacetList>
</template>
```

## Right Aligned

```vue
<template>
  <MateFacetList titleText="Right Aligned" theme="inline right-aligned">
    <MateFacet keyText="Ermächtigung">321,12 €</MateFacet>
    <MateFacet keyText="Inanspruchnahme">12.323,00 €</MateFacet>
    <MateFacet theme="success" keyText="Mehrausgaben">1.000.091,00 €</MateFacet>
    <MateFacet theme="error" keyText="Vorsteuer">-323.323,00 €</MateFacet>
  </MateFacetList>
</template>
```

## Small

```vue
<template>
  <MateFacetList titleText="Small" theme="inline small">
    <MateFacet keyText="key">value</MateFacet>
    <MateFacet keyText="key">value</MateFacet>
  </MateFacetList>
</template>
```

## Icons as Keys

```vue
<template>
  <MateFacetList titleText="Icons as keys" theme="inline">
    <MateFacet>
      <span theme="icon" slot="key">person_baseline</span>
      Max Mustermann
    </MateFacet>
    <MateFacet>
      <span theme="icon" slot="key">phone</span>
      +49 123 456789
    </MateFacet>
  </MateFacetList>
</template>
```

## Medium

```vue
<template>
  <MateFacetList titleText="Medium" theme="inline medium">
    <MateFacet keyText="key">value</MateFacet>
    <MateFacet keyText="key">value</MateFacet>
  </MateFacetList>
</template>
```

## Large

```vue
<template>
  <MateFacetList titleText="Large" theme="inline large">
    <MateFacet keyText="key">value</MateFacet>
    <MateFacet keyText="key">value</MateFacet>
  </MateFacetList>
</template>
```

## No Header

```vue
<template>
  <MateFacetList theme="inline">
    <MateFacet keyText="Name">Max Mustermann</MateFacet>
    <MateFacet keyText="Straße">Hauptstraße</MateFacet>
    <MateFacet keyText="Ort">Bautzen</MateFacet>
  </MateFacetList>
</template>
```

## Empty Header

```vue
<template>
  <MateFacetList theme="inline empty-header">
    <MateFacet keyText="Name">Max Mustermann</MateFacet>
    <MateFacet keyText="Straße">Hauptstraße</MateFacet>
    <MateFacet keyText="Ort">Bautzen</MateFacet>
  </MateFacetList>
</template>
```

## Plain Text Facet

```vue
<template>
  <MateFacet 
    keyText="Plain text facet" 
    valueText="Lorem ipsum dolor sit amet..." 
    theme="text" 
    style="height: 200px">
  </MateFacet>
</template>
```

## KPI

```vue
<template>
  <MateFacet keyText="Gesamtbestand" theme="kpi">
    916
    <span theme="badge success no-border">5.14%</span>
  </MateFacet>
</template>
```

## KPI with Icon

```vue
<template>
  <MateFacet keyText="Gesamtbestand" theme="kpi">
    <span theme="icon">person</span>
    <span theme="badge success no-border">5.14%</span>
  </MateFacet>
</template>
```

## Key Separator

```vue
<template>
  <MateFacetList titleText="With Key Separator" theme="inline key-separator">
    <MateFacet keyText="Name">Max Mustermann</MateFacet>
    <MateFacet keyText="Ort">Bautzen</MateFacet>
  </MateFacetList>
</template>
```

## Empty Value Indicator

```vue
<template>
  <MateFacetList titleText="Empty Value" theme="inline empty-value-indicator">
    <MateFacet keyText="Manufacturer"></MateFacet>
    <MateFacet keyText="Factory">Florida, FL</MateFacet>
  </MateFacetList>
</template>
```

## With Tooltip

```vue
<template>
  <MateFacetList 
    titleText="With Tooltips" 
    titleTooltipText="Tooltip of TITLE">
    <MateFacet 
      keyText="key" 
      keyTooltipText="Tooltip of KEY" 
      valueText="value" 
      valueTooltipText="Tooltip of VALUE">
    </MateFacet>
  </MateFacetList>
</template>
```

## With Value Prefix

```vue
<template>
  <MateFacetList theme="inline">
    <MateFacet keyText="Genehmigung" valueText="Liegt vor">
      <span icon theme="icon success" slot="value-prefix">check</span>
    </MateFacet>
  </MateFacetList>
</template>
```