@vcsh/kern-vue-kit
Version:
Dieses Repository enthält die VUE-Implementation des KERN Design-Systems.
628 lines (384 loc) • 9.36 kB
Markdown
# Component Documentation
Generated: 2025-11-30T07:43:26.133Z
## KernAccordion
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| label | `string` | No | `''` |
| open | `boolean` | No | `false` |
### Emits
No events emitted.
## KernAccordionGroup
### Props
No props defined.
### Emits
No events emitted.
## KernAlert
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| text | `string` | No | `''` |
| variant | `'info' \| 'success' \| 'warning' \| 'danger'` | No | `'info'` |
### Emits
No events emitted.
## KernBadge
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| text | `string` | No | `''` |
| variant | `'success' \| 'danger' \| 'warning' \| 'info'` | No | `'info'` |
| icon | `string` | Yes | `-` |
### Emits
No events emitted.
## KernBody
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| size | `'large' \| 'medium' \| 'small'` | No | `'medium'` |
| bold | `boolean` | No | `false` |
### Emits
No events emitted.
## KernButton
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| label | `string` | No | `''` |
| variant | `'primary' \| 'secondary' \| 'tertiary' \| 'info'` | No | `'primary'` |
| icon | `string` | No | `''` |
| iconOnly | `boolean` | No | `false` |
| iconPosition | `'left' \| 'right'` | No | `'left'` |
| iconSize | `string` | No | `'small'` |
| block | `boolean` | No | `false` |
| disabled | `boolean` | No | `false` |
### Emits
No events emitted.
## KernCard
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| preline | `string` | No | `''` |
| title | `string` | No | `''` |
| subline | `string` | No | `''` |
| hug | `boolean` | No | `false` |
| active | `boolean` | No | `false` |
| size | `'small' \| 'large'` | No | `undefined` |
### Emits
No events emitted.
## KernCheckbox
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| label | `string` | No | `''` |
| id | `string` | Yes | `-` |
| error | `string` | No | `''` |
| disabled | `boolean` | No | `false` |
| name | `string` | Yes | `-` |
### Emits
| Event | Type |
|-------|------|
| update:modelValue | `(value: boolean) => void` |
## KernColumn
### Props
No props defined.
### Emits
No events emitted.
## KernContainer
### Props
No props defined.
### Emits
No events emitted.
## KernDateInput
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| id | `string` | Yes | `-` |
| label | `string` | No | `-` |
| disabled | `boolean` | No | `-` |
| readonly | `boolean` | No | `-` |
| error | `string` | No | `-` |
| hint | `string` | No | `-` |
| optional | `boolean` | No | `-` |
| optionalText | `string` | No | `-` |
### Emits
| Event | Type |
|-------|------|
| blur | `void` |
| focus | `void` |
| update:modelValue | `(value: Date \| null) => void` |
## KernDescriptionList
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| items | `KeyValuePair[]` | No | `() => []` |
| column | `boolean` | No | `false` |
### Emits
No events emitted.
## KernDialog
### Props
No props defined.
### Emits
No events emitted.
## KernDivider
### Props
No props defined.
### Emits
No events emitted.
## KernError
### Props
No props defined.
### Emits
No events emitted.
## KernFieldset
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| label | `string` | No | `''` |
| error | `string` | No | `''` |
| horizontal | `boolean` | No | `false` |
| optional | `boolean` | No | `false` |
| hint | `string` | No | `''` |
| optionalText | `string` | No | `-` |
### Emits
No events emitted.
## KernHeader
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| label | `string` | No | `'Offizielle Website – Bundesrepublik Deutschland'` |
| fluid | `boolean` | No | `true` |
### Emits
No events emitted.
## KernHeading
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| size | `'display' \| 'x-large' \| 'large' \| 'medium' \| 'small'` | No | `'x-large'` |
### Emits
No events emitted.
## KernIcon
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| icon | `IconName \| string` | Yes | `-` |
| size | `string` | No | `'medium'` |
### Emits
No events emitted.
## KernInput
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| id | `string` | Yes | `-` |
| label | `string` | No | `-` |
| type | `string` | No | `-` |
| disabled | `boolean` | No | `-` |
| error | `string` | No | `-` |
| hint | `string` | No | `-` |
| readonly | `boolean` | No | `-` |
| optional | `boolean` | No | `-` |
| optionalText | `string` | No | `-` |
| inputmode | `"text" \| "email" \| "search" \| "tel" \| "url" \| "none" \| "numeric" \| "decimal" \| undefined` | No | `-` |
| pattern | `string` | No | `-` |
### Emits
| Event | Type |
|-------|------|
| blur | `void` |
| focus | `void` |
| update:modelValue | `(value: string \| number) => void` |
## KernLabel
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| size | `'large' \| 'medium' \| 'small'` | No | `'medium'` |
### Emits
No events emitted.
## KernLink
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| variant | `string` | No | `''` |
| href | `string` | No | `'#'` |
### Emits
No events emitted.
## KernList
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| size | `'large' \| 'medium' \| 'small'` | No | `undefined` |
| variant | `'bullet' \| 'number'` | No | `undefined` |
### Emits
No events emitted.
## KernLoader
### Props
No props defined.
### Emits
No events emitted.
## KernNumber
### Props
No props defined.
### Emits
No events emitted.
## KernPreline
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| size | `'small' \| 'default' \| 'large'` | No | `'default'` |
### Emits
No events emitted.
## KernProgress
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| id | `string` | Yes | `-` |
| label | `string` | No | `''` |
| labelPosition | `"top" \| "bottom"` | No | `'top'` |
| value | `number` | No | `0` |
| max | `number` | No | `100` |
### Emits
No events emitted.
## KernRadio
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| id | `string` | Yes | `-` |
| label | `string` | No | `-` |
| name | `string` | No | `-` |
| value | `T` | No | `-` |
| disabled | `boolean` | No | `-` |
| error | `string` | No | `-` |
### Emits
| Event | Type |
|-------|------|
| update:modelValue | `(value: T) => void` |
## KernRow
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| justify | `'start' \| 'center' \| 'end' \| 'around' \| 'between' \| 'evenly'` | No | `undefined` |
| align | `'start' \| 'center' \| 'end'` | No | `undefined` |
### Emits
No events emitted.
## KernSelect
### Props
No props defined.
### Emits
| Event | Type |
|-------|------|
| blur | `void` |
| focus | `void` |
| update:modelValue | `(value: T) => void` |
## KernSubline
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| size | `'small' \| 'default' \| 'large'` | No | `'default'` |
### Emits
No events emitted.
## KernSummary
### Props
No props defined.
### Emits
No events emitted.
## KernSummaryGroup
### Props
No props defined.
### Emits
No events emitted.
## KernTable
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| title | `string` | Yes | `-` |
| columns | `TableColumn[]` | Yes | `-` |
| rows | `TableRow[]` | Yes | `-` |
### Emits
No events emitted.
## KernTaskList
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| title | `string` | No | `''` |
### Emits
No events emitted.
## KernTaskListGroup
### Props
No props defined.
### Emits
No events emitted.
## KernTaskListItem
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| number | `number` | No | `-` |
### Emits
No events emitted.
## KernTextarea
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| id | `string` | Yes | `-` |
| label | `string` | No | `-` |
| type | `string` | No | `-` |
| disabled | `boolean` | No | `-` |
| error | `string` | No | `-` |
| hint | `string` | No | `-` |
| optional | `boolean` | No | `-` |
| optionalText | `string` | No | `-` |
### Emits
| Event | Type |
|-------|------|
| blur | `void` |
| focus | `void` |
| update:modelValue | `(value: string) => void` |
## KernThemeToggle
### Props
No props defined.
### Emits
No events emitted.
## KernTitle
### Props
| Name | Type | Required | Default |
|------|------|----------|----------|
| size | `'large' \| 'medium' \| 'small'` | No | `'medium'` |
### Emits
No events emitted.