Stratton.Cologne

Appearance

SearchField ​

Suchfeld mit ARIA‑Attributen und Icon‑Support.

vue
<script setup lang="ts">
import { SearchField } from '@stratton-cologne/ui'
import { ref } from 'vue'

const q = ref('')
</script>

<template>
  <SearchField v-model="q" placeholder="Suchen…" />
</template>

Props ​

  • modelValue: Suchstring (v-model).
  • placeholder: Platzhaltertext.
  • filters: Mapping { feld: [alias1, alias2] } für Vorschlag-Liste.
  • manual: Wenn true, löst nur Button/Enter die Suche aus (Default: false).
  • ariaLabel / ariaSearchLabel: A11y-Texte.
  • id / instance: Stabile Root-ID und data-instance.

Events ​

  • update:modelValue(string)
  • search(string)

Slots ​

  • icon: Icon- oder Button-Inhalt.
  • option: Eintrag im Dropdown { option, index, active }.
  • empty: Inhalt, wenn keine Treffer.

Styling (data-Attribute) ​

  • Root: [data-component="sc-search"]
  • Submit: [data-role="submit"]
  • Eingabe: [data-role="search"]
  • Dropdown: [data-role="dropdown"] mit li[data-role="option"]/[data-role="empty"]