UNPKG

@vcsh/kern-vue-kit

Version:

Dieses Repository enthält die VUE-Implementation des KERN Design-Systems.

628 lines (384 loc) 9.36 kB
# 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. ---