@vcsh/kern-vue-kit/README.md

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

# KERN – VUE-Kit

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

Mit KERN schaffen wir einen offenen UX-Standard für die deutsche Verwaltung, der Umsetzende befähigt, barrierefreie digitale Verwaltungslösungen effizient und nutzendenzentriert zu entwickeln.
KERN ist ein Open-Source-Projekt, das von der Ländern Hamburg und Schleswig-Holstein initiiert wurde. Alle mit Interesse an der Digitalisierung der öffentlichen Verwaltung sind herzlich eingeladen, Teil der bundesweiten interdisziplinären Community zu werden. Alle Informationen auf: www.kern-ux.de.

## Disclaimer

> **Das KERN VUE-Kit** ist eine Implementation des KERN Design-Systems innerhalb eines Community-Projekts. Das KERN Projektteam ist nicht dafür verantwortlich und kann Dir bei der Nutzung nicht helfen. Kontaktiere den **Maintainer** direkt, wenn Du Hilfe benötigst, einen Bug melden möchtest oder eine Funktion anfragen willst. Dies funktioniert am besten durch die Erstellung eines Bugs oder eines Issues im Ticket-System dieses Repositorys.
>
> Verantwortlich und Maintainer für dieses Repository sind: Fynn Weyrich [@OC000079113093](https://gitlab.opencode.de/OC000079113093) und Fabian Wilms [@wilms](https://gitlab.opencode.de/wilms)
>
> Neue Komponenten sollten über ein Ticket im Haupt-Repository angefragt werden, damit alle Umsetzungen davon profitieren können.
>
> Weitere Information findest Du in den Dateien CODE_OF_CONDUCT, CONTRIBUTING, LICENSE, CHANGELOG und COMPONENTS.

## Beitragen

Die Entwicklung des KERN Design-Systems ist im [Hauptrepository](https://gitlab.opencode.de/kern-ux/pattern-library) organisiert.

Für Bugs und Verbesserungsvorschläge, die sich ausschließlich auf den VUE-Code beziehen, schaue dir bitte unsere [Contributing Guidelines](https://gitlab.opencode.de/kern-ux/community/kern-vue-kit/-/blob/main/CONTRIBUTING.md?ref_type=heads) an. Wir freuen uns auf deinen Beitrag!

## 🚀 Features

- **🎨 KERN Design System** - Complete implementation of KERN UX components
- **📱 Modern Vue** - Built with Vue3 composition API
- **♿ Accessibility First** - WCAG 2.1 AA compliant components
- **🔧 TypeScript Ready** - Full TypeScript support with comprehensive type definitions
- **🧠 IntelliSense Support** - Rich IDE support with autocomplete and type checking

## 🛠️ Usage

### Import kern-ux/native style and kern-vue-kit

```console
npm install @kern-ux/native
npm install @vcsh/kern-ux-kit
```

### Import KERN style in App.vue

```vue
<style>
@import "@kern-ux/native/dist/kern.min.css";
@import "@kern-ux/native/dist/fonts/fira-sans.css";
</style> 
```

### Use Components

Import and use the Vue components in your application:

```vue
<template>
  <KernButton label="Primary Button" variant="primary" @click="onClick()" />
</template>

<script setup>
import KernButton from "@vcsh/kern-vue-kit";

function onClick() {
  console.log("I was clicked");
}
</script>
```

## 🎨 Available Components

All components follow the KERN design system and include:

- **Accessibility**: WCAG compliant by default
- **Theming**: Support for different themes
- **TypeScript**: Full TypeScript support
- **Props**: Configurable through props
- **Events**: Standard Vue event handling

See the storybook for more details [TBD LINK].

## 📚 Documentation

Each component is documented with:

- Interactive examples
- Props documentation
- Usage guidelines
- Accessibility information

## Available Scripts

### Development

- `npm run dev` – Start the demo app in dev mode (Vite)
- `npm run demo` – Run the demo app (Vite)
- `npm run storybook` – Start Storybook on port 6006

### Building

- `npm run build` – Build the library (delegates to `build:lib`)
- `npm run build:lib` – Type-check and build the library bundle to `dist/`
- `npm run build:demo` – Build the demo app
- `npm run build:storybook` – Build Storybook static site to `dist/storybook`

### Code Quality

- `npm run type-check` – Run TypeScript type-checking in build mode
- `npm run test` – Run unit tests with Vitest
- `npm run lint` – Lint source files with ESLint
- `npm run format` – Format files with Prettier (write changes)
- `npm run format:check` – Check formatting with Prettier (no writes)
- `npm run format:lint` – Alias to run formatter

### Releases

- `npm run release` – Create a release with standard-version
- `npm run release:minor` – Release a minor version
- `npm run release:major` – Release a major version
- `npm run release:patch` – Release a patch version
- `npm run release:prerelease` – Create a pre-release version
- `npm run release:first` – Create the first release (initial tag)

### Publishing

- `npm run publish:prepare` – Build lib and create npm package tarball in `dist/kern-vue-kit`
- `npm run publish:check` – Prepare and create npm package (dry-run)
- `npm run publish:dry-run` – Build and attempt to publish to npm (dry-run)
- `npm run publish:preview` – Alias for `publish:dry-run`
- `npm run publish:npm` – Build and publish package to npm (public access)
- `npm run publish:npm-beta` – Publish to npm with `beta` tag
- `npm run publish:npm-alpha` – Publish to npm with `alpha` tag

## ♿ Accessibility

All components are designed with accessibility in mind:

- Proper ARIA attributes
- Keyboard navigation support
- Screen reader compatibility
- High contrast support

## 📄 License

This project is licensed under the **EUPL-1.2** License - see the [LICENSE.md](./LICENSE.md) file for details.

## 👥 Authors & Contributors

- **Fynn Weyrich** - _Initial work_
- **Fabian Wilms** - _Contributor_

This documentation was inspired by the documentation of the [KERN Angular Kit](https://gitlab.opencode.de/kern-ux/community/angular-kit).

## 🔗 Related Projects

- [KERN UX Native](https://www.npmjs.com/package/@kern-ux/native) - CSS framework
- [KERN Design System](https://gitlab.opencode.de/kern-ux) - Design system documentation

## 🐛 Issues & Support

- **Bug Reports**: [GitLab Issues](https://gitlab.opencode.de/kern-ux/community/kern-vue-kit/-/issues)
- **Feature Requests**: [GitLab Issues](https://gitlab.opencode.de/kern-ux/community/kern-vue-kit/-/issues)
- **Mattermost**: [kern-vue-kit Channel](https://chat.kern-ux.de/default/channels/vue-kit-austausch)

---

Made with ❤️ by the KERN UX Community