@telesign/boreal-vue 0.1.0-alpha.0

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.
Files changed (31) hide show
  1. package/README.md +73 -0
  2. package/dist/components.d.ts +4 -0
  3. package/dist/components.js +29 -0
  4. package/dist/components.js.map +1 -0
  5. package/dist/css/boreal.css +1594 -0
  6. package/dist/css/global.css +682 -0
  7. package/dist/css/theme-connect.css +227 -0
  8. package/dist/css/theme-engage.css +227 -0
  9. package/dist/css/theme-protect.css +227 -0
  10. package/dist/css/theme-proximus.css +227 -0
  11. package/dist/index.d.ts +2 -0
  12. package/dist/index.js +3 -0
  13. package/dist/index.js.map +1 -0
  14. package/dist/plugin.d.ts +2 -0
  15. package/dist/plugin.js +5 -0
  16. package/dist/plugin.js.map +1 -0
  17. package/dist/scss/global/_fonts.scss +1 -0
  18. package/dist/scss/global/_index.scss +3 -0
  19. package/dist/scss/global/_reset.scss +50 -0
  20. package/dist/scss/global/_typography.scss +156 -0
  21. package/dist/scss/maps/_primitives.scss +461 -0
  22. package/dist/scss/maps/_theme-connect.scss +227 -0
  23. package/dist/scss/maps/_theme-engage.scss +227 -0
  24. package/dist/scss/maps/_theme-protect.scss +227 -0
  25. package/dist/scss/maps/_theme-proximus.scss +227 -0
  26. package/dist/scss/variables/_primitives.scss +459 -0
  27. package/dist/scss/variables/_theme-connect.scss +225 -0
  28. package/dist/scss/variables/_theme-engage.scss +225 -0
  29. package/dist/scss/variables/_theme-protect.scss +225 -0
  30. package/dist/scss/variables/_theme-proximus.scss +225 -0
  31. package/package.json +50 -0
package/README.md ADDED
@@ -0,0 +1,73 @@
1
+ # Vue Wrapper for Boreal DS
2
+
3
+ A lightweight utility that wraps Boreal DS web components for seamless integration in Vue 3 applications.
4
+
5
+ ## Overview
6
+
7
+ Using Boreal DS Vue wrappers over plain web components provides several advantages:
8
+
9
+ - **Type checking** — full TypeScript support with typed props and events
10
+ - **`v-model` support** — form control components work with Vue's two-way binding
11
+ - **Router integration** — compatible with Vue Router's `<router-link>`
12
+
13
+ ## Installation
14
+
15
+ > [!TIP]
16
+ > Refer to the official Boreal DS documentation at [Boreal DS Storybook](https://release-current--69b1eb61625aa69a7886f854.chromatic.com/) for more details.
17
+
18
+ ```sh
19
+ npm install @telesign/boreal-vue
20
+ ```
21
+
22
+ > [!NOTE]
23
+ > `@telesign/boreal-web-components` is a dependency of this package and will be installed automatically. You do not need to install it separately.
24
+
25
+ ## Setup
26
+
27
+ ### Styles
28
+
29
+ Import the Boreal DS stylesheet in your application entry file:
30
+
31
+ ```ts
32
+ // main.ts
33
+ import '@telesign/boreal-vue/css/boreal.css';
34
+ ```
35
+
36
+ ### Icon font
37
+
38
+ Add the Boreal DS icon font to the `<head>` of your `index.html`:
39
+
40
+ ```html
41
+ <link
42
+ rel="stylesheet"
43
+ href="https://resources-borealds.s3.us-east-1.amazonaws.com/icons/current/boreal-styles.css"
44
+ />
45
+ ```
46
+
47
+ ### Theming
48
+
49
+ Set the `data-theme` attribute on the `<body>` element to activate a brand theme:
50
+
51
+ ```html
52
+ <body data-theme="proximus">
53
+ ```
54
+
55
+ Available values: `connect` | `engage` | `protect` | `proximus`
56
+
57
+ ## Usage
58
+
59
+ ```vue
60
+ <script setup lang="ts">
61
+ import { BdsBanner } from '@telesign/boreal-vue';
62
+
63
+ const handleClose = () => {
64
+ console.log('Banner closed');
65
+ };
66
+ </script>
67
+
68
+ <template>
69
+ <BdsBanner variant="info" :enable-close="true" @close="handleClose">
70
+ Welcome to Boreal DS
71
+ </BdsBanner>
72
+ </template>
73
+ ```
package/dist/components.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { type StencilVueComponent } from '@stencil/vue-output-target/runtime';
2
+ import type { JSX } from '@telesign/boreal-web-components';
3
+ export declare const BdsBanner: StencilVueComponent<JSX.BdsBanner>;
4
+ export declare const BdsTypography: StencilVueComponent<JSX.BdsTypography>;
package/dist/components.js ADDED
@@ -0,0 +1,29 @@
1
+ import { defineContainer } from '@stencil/vue-output-target/runtime';
2
+ import { defineCustomElement as defineBdsBanner } from '@telesign/boreal-web-components/components/bds-banner.js';
3
+ import { defineCustomElement as defineBdsTypography } from '@telesign/boreal-web-components/components/bds-typography.js';
4
+ export const BdsBanner = defineContainer('bds-banner', defineBdsBanner, [
5
+ 'idComponent',
6
+ 'variant',
7
+ 'enableClose',
8
+ 'close'
9
+ ], [
10
+ 'close'
11
+ ]);
12
+ export const BdsTypography = defineContainer('bds-typography', defineBdsTypography, [
13
+ 'variant',
14
+ 'size',
15
+ 'state',
16
+ 'customClass',
17
+ 'element',
18
+ 'align',
19
+ 'ellipsis',
20
+ 'maxLines',
21
+ 'tooltipText',
22
+ 'isRequired',
23
+ 'htmlFor',
24
+ 'href',
25
+ 'target',
26
+ 'isDownloadable',
27
+ 'filename'
28
+ ]);
29
+ //# sourceMappingURL=components.js.map
package/dist/components.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"components.js","sourceRoot":"","sources":["../lib/components.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAA4B,MAAM,oCAAoC,CAAC;AAI/F,OAAO,EAAE,mBAAmB,IAAI,eAAe,EAAE,MAAM,0DAA0D,CAAC;AAClH,OAAO,EAAE,mBAAmB,IAAI,mBAAmB,EAAE,MAAM,8DAA8D,CAAC;AAG1H,MAAM,CAAC,MAAM,SAAS,GAAqD,eAAe,CAAgB,YAAY,EAAE,eAAe,EAAE;IACvI,aAAa;IACb,SAAS;IACT,aAAa;IACb,OAAO;CACR,EAAE;IACD,OAAO;CACR,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,aAAa,GAAyD,eAAe,CAAoB,gBAAgB,EAAE,mBAAmB,EAAE;IAC3J,SAAS;IACT,MAAM;IACN,OAAO;IACP,aAAa;IACb,SAAS;IACT,OAAO;IACP,UAAU;IACV,UAAU;IACV,aAAa;IACb,YAAY;IACZ,SAAS;IACT,MAAM;IACN,QAAQ;IACR,gBAAgB;IAChB,UAAU;CACX,CAAC,CAAC"}