@marioschmidt/design-system-vue 1.0.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +244 -0
- package/dist/components.d.ts +5 -0
- package/dist/components.d.ts.map +1 -0
- package/dist/components.js +14 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +3 -0
- package/package.json +43 -0
package/README.md
ADDED
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
# Vue 3 Wrappers for BILD Design System
|
|
2
|
+
|
|
3
|
+
> **Part of the [BILD Design Ops Pipeline](../../README.md)** | [Components](../components/README.md) | [React](../react/README.md)
|
|
4
|
+
|
|
5
|
+
Vue 3 wrapper components for the BILD Design System, auto-generated from Stencil Web Components using `@stencil/vue-output-target`.
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@marioschmidt/design-system-vue)
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @marioschmidt/design-system-vue @marioschmidt/design-system-tokens
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
**Peer Dependencies:**
|
|
18
|
+
- `vue` >= 3
|
|
19
|
+
- `@marioschmidt/design-system-components` ^1.0.0 (optional, auto-loaded)
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
### Basic Usage
|
|
26
|
+
|
|
27
|
+
```vue
|
|
28
|
+
<script setup>
|
|
29
|
+
import { DsButton, DsCard } from '@marioschmidt/design-system-vue';
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<template>
|
|
33
|
+
<div data-color-brand="bild" data-content-brand="bild" data-theme="light">
|
|
34
|
+
<DsButton variant="primary" @click="handleClick">
|
|
35
|
+
Click me
|
|
36
|
+
</DsButton>
|
|
37
|
+
|
|
38
|
+
<DsCard card-title="Hello World">
|
|
39
|
+
<p>Card content goes here.</p>
|
|
40
|
+
</DsCard>
|
|
41
|
+
</div>
|
|
42
|
+
</template>
|
|
43
|
+
|
|
44
|
+
<style>
|
|
45
|
+
@import '@marioschmidt/design-system-tokens/css/bundles/bild.css';
|
|
46
|
+
</style>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### With Theme Provider (Recommended)
|
|
50
|
+
|
|
51
|
+
```vue
|
|
52
|
+
<!-- ThemeProvider.vue -->
|
|
53
|
+
<script setup>
|
|
54
|
+
defineProps({
|
|
55
|
+
colorBrand: { type: String, default: 'bild' },
|
|
56
|
+
contentBrand: { type: String, default: 'bild' },
|
|
57
|
+
theme: { type: String, default: 'light' },
|
|
58
|
+
density: { type: String, default: 'default' },
|
|
59
|
+
});
|
|
60
|
+
</script>
|
|
61
|
+
|
|
62
|
+
<template>
|
|
63
|
+
<div
|
|
64
|
+
:data-color-brand="colorBrand"
|
|
65
|
+
:data-content-brand="contentBrand"
|
|
66
|
+
:data-theme="theme"
|
|
67
|
+
:data-density="density"
|
|
68
|
+
>
|
|
69
|
+
<slot />
|
|
70
|
+
</div>
|
|
71
|
+
</template>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
```vue
|
|
75
|
+
<!-- App.vue -->
|
|
76
|
+
<script setup>
|
|
77
|
+
import { DsButton } from '@marioschmidt/design-system-vue';
|
|
78
|
+
import ThemeProvider from './ThemeProvider.vue';
|
|
79
|
+
</script>
|
|
80
|
+
|
|
81
|
+
<template>
|
|
82
|
+
<ThemeProvider color-brand="bild" theme="light">
|
|
83
|
+
<DsButton variant="primary">BILD Button</DsButton>
|
|
84
|
+
</ThemeProvider>
|
|
85
|
+
</template>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## Available Components
|
|
91
|
+
|
|
92
|
+
| Component | Props | Description |
|
|
93
|
+
|-----------|-------|-------------|
|
|
94
|
+
| **DsButton** | `variant`, `disabled` | Interactive button with hover/active states |
|
|
95
|
+
| **DsCard** | `surface`, `card-title` | Content container with shadow and padding |
|
|
96
|
+
|
|
97
|
+
### DsButton
|
|
98
|
+
|
|
99
|
+
```vue
|
|
100
|
+
<DsButton variant="primary">Primary Button</DsButton>
|
|
101
|
+
<DsButton variant="secondary">Secondary Button</DsButton>
|
|
102
|
+
<DsButton variant="tertiary">Tertiary Button</DsButton>
|
|
103
|
+
<DsButton disabled>Disabled Button</DsButton>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
**Props:**
|
|
107
|
+
| Prop | Type | Default | Description |
|
|
108
|
+
|------|------|---------|-------------|
|
|
109
|
+
| `variant` | `'primary' \| 'secondary' \| 'tertiary'` | `'primary'` | Button style variant |
|
|
110
|
+
| `disabled` | `boolean` | `false` | Disabled state |
|
|
111
|
+
|
|
112
|
+
### DsCard
|
|
113
|
+
|
|
114
|
+
```vue
|
|
115
|
+
<DsCard card-title="Card Title">
|
|
116
|
+
<p>Card content</p>
|
|
117
|
+
</DsCard>
|
|
118
|
+
|
|
119
|
+
<DsCard surface="secondary">
|
|
120
|
+
<p>Secondary surface card</p>
|
|
121
|
+
</DsCard>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
**Props:**
|
|
125
|
+
| Prop | Type | Default | Description |
|
|
126
|
+
|------|------|---------|-------------|
|
|
127
|
+
| `surface` | `'primary' \| 'secondary'` | `'primary'` | Card surface variant |
|
|
128
|
+
| `card-title` | `string` | - | Optional card title |
|
|
129
|
+
|
|
130
|
+
> **Note:** In Vue templates, use `kebab-case` for props (e.g., `card-title` instead of `cardTitle`).
|
|
131
|
+
|
|
132
|
+
---
|
|
133
|
+
|
|
134
|
+
## Theming
|
|
135
|
+
|
|
136
|
+
Components automatically adapt to design tokens via CSS Custom Properties.
|
|
137
|
+
|
|
138
|
+
### Data Attributes
|
|
139
|
+
|
|
140
|
+
Set these on a parent element (usually `<body>` or a wrapper div):
|
|
141
|
+
|
|
142
|
+
| Attribute | Values | Purpose |
|
|
143
|
+
|-----------|--------|---------|
|
|
144
|
+
| `data-color-brand` | `bild`, `sportbild` | Colors & effects |
|
|
145
|
+
| `data-content-brand` | `bild`, `sportbild`, `advertorial` | Typography & spacing |
|
|
146
|
+
| `data-theme` | `light`, `dark` | Color mode |
|
|
147
|
+
| `data-density` | `default`, `dense`, `spacious` | Spacing density |
|
|
148
|
+
|
|
149
|
+
### Runtime Theme Switching
|
|
150
|
+
|
|
151
|
+
```vue
|
|
152
|
+
<script setup>
|
|
153
|
+
import { ref } from 'vue';
|
|
154
|
+
import { DsButton } from '@marioschmidt/design-system-vue';
|
|
155
|
+
|
|
156
|
+
const theme = ref('light');
|
|
157
|
+
const toggleTheme = () => {
|
|
158
|
+
theme.value = theme.value === 'light' ? 'dark' : 'light';
|
|
159
|
+
};
|
|
160
|
+
</script>
|
|
161
|
+
|
|
162
|
+
<template>
|
|
163
|
+
<div data-color-brand="bild" :data-theme="theme">
|
|
164
|
+
<button @click="toggleTheme">Toggle Theme</button>
|
|
165
|
+
<DsButton variant="primary">Themed Button</DsButton>
|
|
166
|
+
</div>
|
|
167
|
+
</template>
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
## How It Works
|
|
173
|
+
|
|
174
|
+
1. **Stencil builds Web Components** with Shadow DOM
|
|
175
|
+
2. **Vue output target** generates wrapper components during build
|
|
176
|
+
3. **Wrappers use `defineCustomElement`** to lazy-load the actual Web Component
|
|
177
|
+
4. **CSS Custom Properties** inherit through the Shadow DOM for theming
|
|
178
|
+
|
|
179
|
+
The Vue wrappers provide:
|
|
180
|
+
- Full TypeScript support with proper prop types
|
|
181
|
+
- Vue event handling (`@click`, `@change`, etc.)
|
|
182
|
+
- v-model support where applicable
|
|
183
|
+
- Tree-shakeable imports
|
|
184
|
+
|
|
185
|
+
---
|
|
186
|
+
|
|
187
|
+
## TypeScript
|
|
188
|
+
|
|
189
|
+
Full TypeScript support is included:
|
|
190
|
+
|
|
191
|
+
```vue
|
|
192
|
+
<script setup lang="ts">
|
|
193
|
+
import { DsButton, DsCard } from '@marioschmidt/design-system-vue';
|
|
194
|
+
import type { JSX } from '@marioschmidt/design-system-components';
|
|
195
|
+
|
|
196
|
+
// Props are fully typed
|
|
197
|
+
const buttonVariant: JSX.DsButton['variant'] = 'primary';
|
|
198
|
+
</script>
|
|
199
|
+
|
|
200
|
+
<template>
|
|
201
|
+
<DsButton :variant="buttonVariant">Typed Button</DsButton>
|
|
202
|
+
</template>
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
---
|
|
206
|
+
|
|
207
|
+
## Vite Configuration
|
|
208
|
+
|
|
209
|
+
If using Vite, you may need to configure custom element handling:
|
|
210
|
+
|
|
211
|
+
```typescript
|
|
212
|
+
// vite.config.ts
|
|
213
|
+
import { defineConfig } from 'vite';
|
|
214
|
+
import vue from '@vitejs/plugin-vue';
|
|
215
|
+
|
|
216
|
+
export default defineConfig({
|
|
217
|
+
plugins: [
|
|
218
|
+
vue({
|
|
219
|
+
template: {
|
|
220
|
+
compilerOptions: {
|
|
221
|
+
// Treat ds-* tags as custom elements
|
|
222
|
+
isCustomElement: (tag) => tag.startsWith('ds-'),
|
|
223
|
+
},
|
|
224
|
+
},
|
|
225
|
+
}),
|
|
226
|
+
],
|
|
227
|
+
});
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
---
|
|
231
|
+
|
|
232
|
+
## Related
|
|
233
|
+
|
|
234
|
+
| Package | Description |
|
|
235
|
+
|---------|-------------|
|
|
236
|
+
| [@marioschmidt/design-system-components](../components/README.md) | Core Stencil Web Components |
|
|
237
|
+
| [@marioschmidt/design-system-react](../react/README.md) | React wrapper components |
|
|
238
|
+
| [@marioschmidt/design-system-tokens](../tokens/README.md) | Design tokens (CSS, JS, iOS, Android) |
|
|
239
|
+
|
|
240
|
+
---
|
|
241
|
+
|
|
242
|
+
## License
|
|
243
|
+
|
|
244
|
+
MIT
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type StencilVueComponent } from '@stencil/vue-output-target/runtime';
|
|
2
|
+
import type { JSX } from '@marioschmidt/design-system-components';
|
|
3
|
+
export declare const DsButton: StencilVueComponent<JSX.DsButton>;
|
|
4
|
+
export declare const DsCard: StencilVueComponent<JSX.DsCard>;
|
|
5
|
+
//# sourceMappingURL=components.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAE/F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,wCAAwC,CAAC;AAMlE,eAAO,MAAM,QAAQ,EAAE,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAGrD,CAAC;AAGH,eAAO,MAAM,MAAM,EAAE,mBAAmB,CAAC,GAAG,CAAC,MAAM,CAGjD,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
/* tslint:disable */
|
|
3
|
+
/* auto-generated vue proxies */
|
|
4
|
+
import { defineContainer } from '@stencil/vue-output-target/runtime';
|
|
5
|
+
import { defineCustomElement as defineDsButton } from '@marioschmidt/design-system-components/dist/components/ds-button.js';
|
|
6
|
+
import { defineCustomElement as defineDsCard } from '@marioschmidt/design-system-components/dist/components/ds-card.js';
|
|
7
|
+
export const DsButton = /*@__PURE__*/ defineContainer('ds-button', defineDsButton, [
|
|
8
|
+
'variant',
|
|
9
|
+
'disabled'
|
|
10
|
+
]);
|
|
11
|
+
export const DsCard = /*@__PURE__*/ defineContainer('ds-card', defineDsCard, [
|
|
12
|
+
'surface',
|
|
13
|
+
'cardTitle'
|
|
14
|
+
]);
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,cAAc,CAAC"}
|
package/dist/index.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@marioschmidt/design-system-vue",
|
|
3
|
+
"version": "1.0.76",
|
|
4
|
+
"description": "Vue wrapper components for BILD Design System",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist/"
|
|
10
|
+
],
|
|
11
|
+
"scripts": {
|
|
12
|
+
"build": "tsc --project tsconfig.json",
|
|
13
|
+
"clean": "rm -rf dist"
|
|
14
|
+
},
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"@stencil/vue-output-target": "^0.11.8"
|
|
17
|
+
},
|
|
18
|
+
"peerDependencies": {
|
|
19
|
+
"vue": ">=3",
|
|
20
|
+
"@marioschmidt/design-system-components": "^1.0.0"
|
|
21
|
+
},
|
|
22
|
+
"devDependencies": {
|
|
23
|
+
"vue": "^3.3.0",
|
|
24
|
+
"typescript": "^5.0.0"
|
|
25
|
+
},
|
|
26
|
+
"keywords": [
|
|
27
|
+
"vue",
|
|
28
|
+
"web-components",
|
|
29
|
+
"design-system",
|
|
30
|
+
"bild",
|
|
31
|
+
"stencil"
|
|
32
|
+
],
|
|
33
|
+
"author": "BILD Design System Team",
|
|
34
|
+
"license": "MIT",
|
|
35
|
+
"repository": {
|
|
36
|
+
"type": "git",
|
|
37
|
+
"url": "git+https://github.com/UXWizard25/vv-token-test-v3.git",
|
|
38
|
+
"directory": "packages/vue"
|
|
39
|
+
},
|
|
40
|
+
"publishConfig": {
|
|
41
|
+
"access": "public"
|
|
42
|
+
}
|
|
43
|
+
}
|