@designsystem_test/vue

Vue 3 component library for the design system.

Note: This package contains Vue 3 implementations of all 36 design system components, matching the React package functionality.

Installation

npm install @designsystem_test/vue @designsystem_test/tokens

Usage

<script setup lang="ts">
import { TextButton, Navigation } from '@designsystem_test/vue';
import '@designsystem_test/tokens/styles.css';
</script>

<template>
  <div>
    <Navigation>
      <template #logo>
        <div>My App</div>
      </template>
    </Navigation>
    
    <TextButton variant="filled" size="medium">
      Click Me
    </TextButton>
  </div>
</template>

Design Tokens

This package depends on @designsystem_test/tokens for design tokens (colors, typography, spacing).

Components

This package includes all 36 production-ready Vue 3 components:

Buttons (8)

• TextButton
• IconTextButton
• DynamicStateButton
• SelectableButton
• IconButton
• IconButtonWithStroke
• IconButtonOnImage
• OptionsButton

Forms (9)

• Input
• Checkbox
• RadioField
• SwitchField
• SelectField
• TextareaField
• InputField
• CheckboxField
• TagInputField

Navigation (2)

• Navigation
• NaviMenuItem

Cards (2)

• PlatformInfoCard
• ProductInfoCard

Feedback (4)

• Toast
• Tooltip
• Notification
• InfoMessage

Dialog (1)

• DialogBody

Media (2)

• Avatar
• ImageUploadButton

Branding (2)

• PartnerLogo
• Talk

Data Display (5)

• Tag
• Table
• Pagination
• Options
• ReservationStatus

Development

# Build the package
npm run build

License

MIT